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