IMWeb训练营作业

var store = {
save(key,value){
localStorage.setItem(key,JSON.stringify(value));
},
fetch(key){
return JSON.parse(localStorage.getItem(key)) || [];
}
}

var list = store.fetch("todolist");

var filter = {
all:function(list){
return list;
},
finished:function(list){
return list.filter(function(item){
return item.isChecked;
})
},
unfinished:function(list){
return list.filter(function(item){
return !item.isChecked;
})
}
}

var vm = new Vue({
el:".main",
data:{
list:list,
todo:"",
editortodos:"",
beforeContent:"",
visibility:"all"  //all finished unfinished
},
watch:{
/*list:function(){
store.save("todolist",this.list);
}*/
list:{
handler:function(){
store.save("todolist",this.list);
},
deep:true
}
},
methods:{
addTodo(event){
this.list.push({
content:this.todo,
isChecked:false
});
this.todo = "";
},
removeTodo(todo){
var index = this.list.indexOf(todo);
this.list.splice(index,1);
},
editorTodo(todo){
this.beforeContent = todo.content;
this.editortodos = todo;
},
editorTodoend(todo){
this.editortodos = "";
},
cancelTodo(todo){
todo.content = this.beforeContent;
this.editortodos = "";
}
},
directives:{
"foucs":{
update(el,binding){
if (binding.value) {
el.focus();
}
}
}
},
computed:{
noCheckLength:function(){
return this.list.filter(function(item){
return !item.isChecked
}).length;
},
filterList:function(){
return filter[this.visibility]?filter[this.visibility](list):list;
}
}
});

function watchHashChange(){
var hash = window.location.hash.slice(1);
vm.visibility = hash;
}

watchHashChange();

window.addEventListener("hashchange",watchHashChange);