!(function() { /** * todo项列表 * */ var List = BI.inherit(BI.Widget, { props: { // 指定组件的className baseCls: "my-todolist-list", text: "正在进行" }, render: function() { var self = this, o = this.options; return { type: "bi.vertical", items: [ { el: { type: "bi.vertical_adapt", height: 40, items: [ { type: "bi.label", cls: "my-todolist-list-text", textAlign: "left", text: o.text, width: 580 }, { type: "bi.center_adapt", cls: "my-todolist-list-count-container", width: 20, height: 20, items: [ { el: { type: "bi.label", ref: function(_ref) { self.count = _ref; }, text: "0" } } ] } ] } }, { // 用bi.vertical布局作为列表项的容器. type: "bi.vertical", vgap: 10, ref: function(_ref) { self.list = _ref; }, items: this._createItems(o.items) } ] }; }, _createItems: function(items) { var self = this; return BI.map(items, function(index, item) { return BI.extend(item, { type: "bi.multi_select_item", // 节点采用复选节点展示 selected: item.done, // 已完成的todo项置为选中状态 disabled: item.done, // 已完成的todo项置为灰化状态 listeners: [ { // 为每个todo项添加"EVENT_CHANGE"事件监听,触发组件自身"EVENT_CHANGE"事件 eventName: "EVENT_CHANGE", action: function(v) { self.fireEvent("EVENT_CHANGE", v); } } ] }); }); }, _setCount: function(count) { this.count.setText(count); }, populate: function(items) { this.list.populate(this._createItems(items)); this._setCount(items.length); } }); BI.shortcut("my.todolist.list", List); })();