前端轻量级MVC框架CanJS详解_其它(4)
复制代码 代码如下: can.fixture('GET /contacts', function(){ return [CONTACTS]; }); var id= 4; can.fixture("POST /contacts", function(){ return {id: (id++)} }); can.fixture("PUT /contacts/{id}"
复制代码 代码如下:
can.fixture('GET /contacts', function(){
return [CONTACTS];
});
var id= 4;
can.fixture("POST /contacts", function(){
return {id: (id++)}
});
can.fixture("PUT /contacts/{id}", function(){
return {};
});
can.fixture("DELETE /contacts/{id}", function(){
return {};
});
can.fixture('GET /categories', function(){
return [CATEGORIES];
});
前4个 fixture模拟 Contact model的GET, POST, PUT 和 DELETE 应答，第5个模拟 Category model的GET应答。
启动APP
你的APP有管理数据的Model，渲染联系人的 View，将这一切组织起来的的Control。现在要做的就是启动APP了。 Now you need to kickstart the application!
将以下代码添加到contacts.js ：
复制代码 代码如下:
$(document).ready(function(){
$.when(Category.findAll(), Contact.findAll()).then(
function(categoryResponse, contactResponse){
var categories = categoryResponse[0],
contacts = contactResponse[0];
new Contacts('#contacts', {
contacts: contacts,
categories: categories
});
});
});
我们来分析一下这段代码：
复制代码 代码如下:
$(document).ready(function(){
使用 jQuery.ready 方法监听DOM的ready。
复制代码 代码如下:
$.when(Category.findAll(), Contact.findAll()).then(
function(categoryResponse, contactResponse){
调用两个Model的 findAll() 方法来获取全部联系人的类型，由于findAll() 有延时， $.when()则确保两个请求同时完成后才执行回调方法。
复制代码 代码如下:
var categories = categoryResponse[0],
contacts = contactResponse[0];
从两个 findAll() 方法中获取对应Model实例的数据集。 是应答所返回的数组的第一个元素。
复制代码 代码如下:
new Contacts('#contacts', {
contacts: contacts,
categories: categories
});
为 #contacts 元素创建Contact 的Control 。联系人和类型数据集传进Control。
用浏览器打开你的APP，你将看到如下的联系人列表：
总结
这是第教程系列的第一篇，你已经了解了CanJS的核心：
Models 你的APP数据的抽象层
Views 将数据转换成HTML的模板
Controls 组织关联一切
精彩图集
精彩文章