前言
上一篇中，数据在表格和表单中实现了同步显示，修改表单数据时，表格中的数据也同时变化，这说明MVVM的双向绑定已经很好实现了。
但是，实际的生产环境中，我们希望表单中的数据，在点击“保存”按钮之前，不要同步到数据列表中。
同时，我们也将一并实现CRUD的代码。
开发环境
引入一个新的JS库 Underscore，介绍请看这儿， Github 链接
CRUD 实现
HTML修改
- Form表单添加 v-on:submit:prevent
- 添加新增、删除按钮
<form class="form-horizontal" role="form" v-on:submit.prevent>
...
<div class="col-sm-offset-2 col-sm-10">
<button @click="newrow" class="btn btn-primary">新增</button>
<button @click="saverow" class="btn btn-primary">保存</button>
<button @click="deleterow" class="btn btn-danger">删除</button>
</div>
JS 修改
showrow: function(value) {
//this.row = value
this.row=JSON.parse(JSON.stringify(value))
},
newrow: function(){
this.row={id:0, name: '', birthday: '',phone: ''}
},
saverow: function(){
if(this.row.id===0){
this.row.id=_.max(this.list, function(stooge){ return stooge.id; }).id+1
this.list.push(JSON.parse(JSON.stringify(this.row)))
}else {
Object.assign(this.list.find(x=>x.id===this.row.id),this.row)
}
},
deleterow: function(){
if(this.row.id!=0){
this.list.splice(_.findIndex(this.list, {id:this.row.id}),1)
}
this.newrow()
}
//_.max和_.findIndex是Underscore库中的函数，js原生函数对于Array的操作稍嫌复杂。
-
数据读取(R)
showrow，原来使用this.row=value，会导致表单使用和列表行同一个对象，所以我们看到表单中的修改，即时显示在表格中。
使用序列化反序列化，创建一个新的对象，表单数据对象相当于只是表格行对象的一个克隆。如果使用value.clone在这儿也是可以的，但需要注意的是，Javascript的默认实现clone只是浅复制。 -
新增数据(C)
newrow，直接将表单数据对象row重置为空对象即可。 -
更新数据(U)
saverow，这儿需要判断，是新数据，还是旧数据，ID=0表示数据为新数据。
3.1 如果是新数据，先取出列表中，最大的ID，增加1，赋值给当前表单对象ID。将表单对象克隆后放入数据列表中。
3.2 如果是就数据，从列表中找到当前表单数据的对应行，复制表单对象的属性值到列表行对象的对应属性中。 -
删除数据(D)
deleterow，判断是旧数据还是新数据，新数据无需对列表进行操作，只需要将表单对象重置即可。旧数据的话，从列表中找到对应行，删除。
运行演示
下集预告
表格组件化尝试
