JavaScriptMVC之Fixture续

其实下面我写的主要并不是Fixture，而是Model.List，为什么还要起这个Fixture续这个名呢？
因为Fixture中，我们讲到它能模拟我们几乎所有的Ajax请求类型，其实真的是我想少了2个种操作。

就是批量的删除，和删除修改，当然，我们可以通过循环删除和修改来达到这个效果。
但是，这并是我们理想状态的代码，我们需要的时，可以像真实操作一样。
批量删除只需要传递ID数组，就可以达到一次删除多条记录，而修改也一样。

经过不断研究JavaScriptMVC的文档，发现原来Model下面还有一个Model.List。

它就为我们提供一个列模型实例。相似于模型，它可以用来：

1、当列变化时会产生一些事件。例如：remove,add,update
2、为多个实例创建多个Ajax请求。例如：批量删除Ajax请求，批量修改Ajax请求
3、给我们多个实例添加协助函数。例如：canDelete函数，判断是否可以删除

下面我们就通过一个例子来讲解，Model.List是如何体现上面这3点。

既然讲到Model.List，那么如何创建一个Model.List呢？我们还是使用《JavaScriptMVC之Fixture》的代码，
然后只要在它的基础上做些修改就可以啦。

首先，我们创建Model.List，打开E:\jQuery\javascriptmvc\cookbook\models\message.js文件，

添加以下代码：

$.Model.List('Cookbook.Models.Message.List',
{
	destroy:'POST /messages/destroy',
	update:'PUT /messages/update'
},{
	/**
	* 是否可以删除，如果message.description中包含有c这个字符，则不能删除
	*3、给我们多个实例添加协助函数。
	*/
	canDelete:function(){
		return this.grep(function(message,index){
			return message.description.indexOf("c")!=0;
		}).length == this.length;
	
	}
});

 这样Model.List就创建成功了，我们既然给List加了2个请求，那么我们就必须给Fixture添加这2个请求的模拟，
打开fixtures.js，添加以下代码：

	//批量删除Ajax请求URL
	$.fixture("POST /messages/destroy",function(settings){
		return true;
	});
	//批量修改Ajax请求URL
	$.fixture("PUT /messages/update",function(settings){
		return true;
	});

 这样我们的Model.List创建成功了，而且已经为它添加了批量删除和修改的功能，那么我们在页面上如何使用呢？
现在我们给列表每行前面加一个复选框，而且在列表下面添加2个按钮叫：批量删除，删除修改。

打开E:\jQuery\javascriptmvc\cookbook\message\list\views\message.ejs，修改结果如下：

<h3><input type="checkbox" /><span class="name"><%= name %></span><a href='javascript://' class='update'>U</a></h3>
<p><%= description %></p>

 打开E:\jQuery\javascriptmvc\cookbook\message\list\views\init.ejs，修改结果如下：

<%for(var i = 0; i < this.length ; i++){%>
	<li <%= this[i]%>>
		<%== $.View('//cookbook/message/list/views/message.ejs', this[i] )%>
	</li>
<%}%>
<input type="button" value="批量删除" id="delete"/><input type="button" value="批量修改" id="update"/>

 最后，就是修改Controller的代码了，修改结果如下：

steal( 'jquery/controller',
	   'jquery/view/ejs',
	   'jquery/controller/view',
	   'cookbook/models',
	   'jquery/tie'//引入Tie插件
	   )
.then( './views/init.ejs', 
       './views/message.ejs', 
       function($){

/**
 * @class Cookbook.Message.List
 * @parent index
 * @inherits jQuery.Controller
 * Lists messages and lets you destroy them.
 */
$.Controller('Cookbook.Message.List',
/** @Static */
{
	defaults : {}
},
/** @Prototype */
{
	init : function(){
		var me = this;
		var messages = Cookbook.Models.Message.findAll({
			group:["description"]
		}).then(function(messages){
				/**
				* 给models.list绑定remove事件
				* 1、当列变化时会产生一些事件。
				*/
				messages.bind("remove", function(ev, removed){
				removed.elements(me.element).remove()
		  });
		});
		this.element.html(this.view('init',messages));

	},
	/**
	* 批量删除
	* 2、为多个实例创建多个Ajax请求。
	*/
	'#delete click':function(el,ev){
		var models = $(":input[checked=checked]").closest(".message").models();
		if(models.canDelete()){
			models.destroy();
		}
	},
	/**
	* 批量修改
	* 2、为多个实例创建多个Ajax请求。
	*/
	"#update click":function(el,ev){
		var models = $(":input[checked=checked]").closest(".message").models();
		//把选中的记录的name值改为test
		models.update({name:'test'});
	},
	"{Cookbook.Models.Message} created" : function(Message, ev, message){
		this.element.append(this.view('init', [message]))
	},
	"{Cookbook.Models.Message} updated" : function(Message, ev, message){
		message.elements(this.element)
		      .html(this.view('message', message) );
	}
});

});

 打开cookbook.html，操作看看，是否已经成功完成我们的批量删除和修改了呢？还有就是判断的校验功能。
是不是代码看起来很清晰，而且编写这部分的代码很快，效果也不错。