fineui-start/src/modules/main.js

!(function() {
    /**
     * todolist 组件
     */
    var ToDoList = BI.inherit(BI.Widget, {

        props: {
            baseCls: "fine-to-do-list"
        },

        // 生命周期函数,在组件创建前
        beforeCreate: function() {
            //  初始化存储数据
            this.list = localStorage.getItem("fine-todolist") ? JSON.parse(localStorage.getItem("fine-todolist")) : [];
        },

        render: function() {
            var self = this, o = this.options;
            return {
                type: "bi.vtape",  // vtape布局,顶部高度固定,下部分列表占满高度
                items: [
                    {
                        el: {
                            type: "my.todolist.header",  // 顶部组件
                            listeners: [
                                {  // 监听组件的EVENT_ADD事件,新建todo项
                                    eventName: "EVENT_ADD",
                                    action: function(v) {
                                        self.addToDo(v);
                                    }
                                }
                            ],
                            height: 40
                        },
                        height: 40
                    }, {
                        type: "bi.horizontal_auto",  // 水平居中布局
                        cls: "my-todolist-background",  // 添加className
                        items: [
                            {
                                el: {
                                    type: "my.todolist.list",  // need todo项列表
                                    ref: function(_ref) {
                                        self.todolist = _ref;
                                    },
                                    items: this._getNeedTodoList(),
                                    text: "正在进行",
                                    listeners: [
                                        {  // 监听EVENT_CHANGE事件,完成某一项todo
                                            eventName: "EVENT_CHANGE",
                                            action: function(v) {
                                                self.finishTodo(v);
                                            }
                                        }
                                    ],
                                    width: 600
                                }
                            }, {
                                el: {
                                    type: "my.todolist.list",  //  已经完成的todo项列表
                                    text: "已经完成",
                                    items: this._getAlreadyDoneList(),
                                    ref: function(_ref) {
                                        self.donelist = _ref;
                                    },
                                    width: 600
                                }
                            }
                        ]
                    }
                ]
            };
        },

        _updateLocalStorage: function() {
            localStorage.setItem("fine-todolist", JSON.stringify(this.list));
        },

        _getNeedTodoList: function() {
            return BI.filter(this.list, function(index, item) {
                return !item.done;
            });
        },

        _getAlreadyDoneList: function() {
            return BI.filter(this.list, function(index, item) {
                return item.done;
            });
        },

        /**
         * 添加todo项
         * @param text todo项的内容
         */
        addToDo: function(text) {
            this.list.push({
                value: BI.UUID(),
                text: text,
                done: false
            });
            this.todolist.populate(this._getNeedTodoList());
            this._updateLocalStorage();
        },

        /**
         * 完成某一项todo
         * @param v todo项的value
         */
        finishTodo: function(v) {
            BI.some(this.list, function(index, item) {
                if (item.value === v) {
                    item.done = true;
                }
            });
            this.todolist.populate(this._getNeedTodoList());
            this.donelist.populate(this._getAlreadyDoneList());
            this._updateLocalStorage();
        }
    });
    BI.shortcut("my.todolist", ToDoList);
})();