Todo list example with Class and mkE

creating-components.js

(function () {
    'use strict';

    // Lets create a simple checklist component, which can add items to the list, allow user to toggle check state,
    // remove items, and display summary to the user
    // Screen-shot: http://i.imgur.com/2ilIB6h.png


    /* -------------- Main component -------------- */
    var TodoList = Class({

        /**
         * List of items
         * @type {Array<TodoList.Item>}
         */
        items: null,

        __construct: function (title) {
            this.items = [];

            this.node = mkE({
                tag: 'div',
                className: 'row',
                els: [
                    {
                        tag: 'div',
                        className: 'col-lg-5 center-block',
                        style: {
                            float: 'none'
                        },
                        els: [
                            {
                                tag: 'h1',
                                text: title
                            },
                            {
                                tag: 'a',
                                className: 'btn btn-block btn-primary',
                                text: 'Add an item',
                                prop: {
                                    onclick: this.addItem
                                }
                            }, {
                                tag: 'a',
                                className: 'btn btn-block btn-info',
                                text: 'Show summary',
                                prop: {
                                    onclick: this.showSummary
                                }
                            },
                            this.nodeList = mkE({
                                tag: 'ul',
                                className: 'list-unstyled'
                            })
                        ]
                    }
                ]
            });
        },


        /**
         * Request user to add an item
         */
        addItem: function () {
            var text;

            if (text = prompt('Enter item text:')) {
                var item = new TodoList.Item(text);
                item.append(this.nodeList);

                // Store the reference
                this.items.push(item);
            }
        },

        /**
         * Output a summary of the checklist
         */
        showSummary: function () {
            var str = '';

            for (var i in this.items) {
                var item = this.items[i];
                if (item.isDeleted) {
                    str += 'Deleted - ' + item.text;
                } else {
                    str += (item.isChecked() ? 'Done' : 'Pending') + ' - ' + item.text;
                }
                str += "\n";
            }

            alert(str);
        }
    }, mkE.Base);

    /* -------------- List item component -------------- */

    /**
     * Create a new list item
     * @param {string} text
     * @constructor
     */
    TodoList.Item = Class({

        /**
         * Is this item removed
         * @type {boolean}
         * @public
         */
        isDeleted: false,

        /**
         * Item text
         * @type {string}
         */
        text: '',

        /**
         * Triggered when checked status changed
         */
        _checkboxChanged: function () {
            this.node.style.color = this.isChecked() ? 'green' : 'red';
        },

        /**
         * Check if item is checked
         * @returns {bool}
         * @public
         */
        isChecked: function () {
            return this.checkbox.checked;
        },

        _remove: function () {
            this.node.remove();
            this.isDeleted = true;
        },

        __construct: function (text) {
            this.text = text;

            this.node = mkE({
                tag: 'li',
                els: [
                    this.checkbox = mkE({
                        tag: 'input',
                        type: 'checkbox',
                        prop: {
                            onchange: this._checkboxChanged
                        }
                    }),
                    text,
                    {
                        tag: 'a',
                        text: 'Remove',
                        className: 'pull-right',
                        prop: {
                            onclick: this._remove
                        }
                    },
                    {
                        tag: 'div',
                        className: 'clearfix'
                    }
                ]
            });

            // Trigger initial change event
            this._checkboxChanged();
        }
    }, mkE.Base);

    /* -------------------- Simple usage -------------------- */

    // To test in action - just copy all this file contents and execute in the JS console

    var todoList = new TodoList('My grocery list');
    $('body').prepend(todoList.node);
})();