!(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); })();