93、JavaScript MVVM集成API

在上一节中，我们用Vue实现了一个简单的TODO应用。通过对Model的更新，DOM结构可以同步更新。

现在，如果要把这个简单的TODO应用变成一个用户能使用的Web应用，我们需要解决几个问题：

用户的TODO数据应该从后台读取；

对TODO的增删改必须同步到服务器后端；

用户在View上必须能够修改TODO。

第1个和第2个问题都是和API相关的。只要我们实现了合适的API接口，就可以在MVVM内部更新Model的同时，通过API把数据更新反映到服务器端，这样，用户数据就保存到了服务器端，下次打开页面时就可以读取TODO列表。

我们在vue-todo的基础上创建vue-todo-2项目，结构如下：

在api.js文件中，我们用数组在服务器端模拟一个数据库，然后实现以下4个API：

GET /api/todos：返回所有TODO列表；

POST /api/todos：创建一个新的TODO，并返回创建后的对象；

PUT /api/todos/:id：更新一个TODO，并返回更新后的对象；

DELETE /api/todos/:id：删除一个TODO。

和上一节的TODO数据结构相比，我们需要增加一个id属性，来唯一标识一个TODO。

准备好API后，在Vue中，我们如何把Model的更新同步到服务器端？

有两个方法，一是直接用jQuery的AJAX调用REST API，不过这种方式比较麻烦。第二个方法是使用vue-resource这个针对Vue的扩展，它可以给VM对象加上一个$resource属性，通过$resource来方便地操作API。

使用vue-resource只需要在导入vue.js后，加一行<script>导入vue-resource.min.js文件即可。可以直接使用CDN的地址：

<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>

我们给VM增加一个init()方法，读取TODO列表：

注意到创建VM时，created指定了当VM初始化成功后的回调函数，这样，init()方法会被自动调用。

类似的，对于添加、修改、删除的操作，我们也需要往VM中添加对应的函数。以添加为例：

添加操作需要一个额外的表单，我们可以创建另一个VM对象vmAdd来对表单作双向绑定，然后，在提交表单的事件中调用vm对象的create方法：

vmAdd和FORM表单绑定：

最后，把vm绑定到对应的DOM：

<div id="vm">
<h3>{{ title }}</h3>
<ol>
<li v-for="t in todos">
<dl>
<dt contenteditable="true" v-on:blur="update(t, 'name', $event)">{{ t.name }}</dt>
<dd contenteditable="true" v-on:blur="update(t, 'description', $event)">{{ t.description }}</dd>
<dd><a href="#0" v-on:click="remove(t)">Delete</a></dd>
</dl>
</li>
</ol>
</div>