Websites/browserbench.org/Speedometer/resources/todomvc/vanilla-examples/vanillajs/js/view.js

/*jshint laxbreak:true */
(function (window) {
    'use strict';

    /**
     * Sets up defaults for all the View methods such as a default template
     *
     * @constructor
     */
    function View() {
    this.defaultTemplate
    =    '<li data-id="{{id}}" class="{{completed}}">'
    +        '<div class="view">'
    +            '<input class="toggle" type="checkbox" {{checked}}>'
    +            '<label>{{title}}</label>'
    +            '<button class="destroy"></button>'
    +        '</div>'
    +    '</li>';
    }

    /**
     * Creates an <li> HTML string and returns it for placement in your app.
     *
     * NOTE: In real life you should be using a templating engine such as Mustache
     * or Handlebars, however, this is a vanilla JS example.
     *
     * @param {object} data The object containing keys you want to find in the
     *                      template to replace.
     * @returns {string} HTML String of an <li> element
     *
     * @example
     * view.show({
     *    id: 1,
     *    title: "Hello World",
     *    completed: 0,
     * });
     */
    View.prototype.show = function (data) {
    var i, l;
    var view = '';

    for (i = 0, l = data.length; i < l; i++) {
    var template = this.defaultTemplate;
    var completed = '';
    var checked = '';

    if (data[i].completed === 1) {
    completed = 'completed';
    checked = 'checked';
    }

    template = template.replace('{{id}}', data[i].id);
    template = template.replace('{{title}}', data[i].title);
    template = template.replace('{{completed}}', completed);
    template = template.replace('{{checked}}', checked);

    view = view + template;
    }

    return view;
    };

    /**
     * Displays a counter of how many to dos are left to complete
     *
     * @param {number} activeTodos The number of active todos.
     * @returns {string} String containing the count
     */
    View.prototype.itemCounter = function (activeTodos) {
    var plural = activeTodos === 1 ? '' : 's';

    return '<strong>' + activeTodos + '</strong> item' + plural + ' left';
    };

    /**
     * Updates the text within the "Clear completed" button
     *
     * @param  {[type]} completedTodos The number of completed todos.
     * @returns {string} String containing the count
     */
    View.prototype.clearCompletedButton = function (completedTodos) {
    if (completedTodos > 0) {
    return 'Clear completed (' + completedTodos + ')';
    } else {
    return '';
    }
    };

    // Export to window
    window.app.View = View;
})(window);