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