JavaScriptMVC之数据绑定(jquery.tie)

如果开发过Java的RCP程序的同学就会知道数据绑定databinding这个功能。
由于之前JavaScript没有使用MVC框架，所以对于Web程序来说，也没有什么数据绑定之说，但是有了MVC框架之后，
Jquery也给出一个数组绑定插件Tie，这个插件可以实现数据绑定功能。

下面我们还是通过例子来讲解Tie是如何使用的，我们如何在Controller中使用Tie来达到视图绑定数据，当数据模型单个
字段值变化时，视图对应的值及时更新。

下面的代码是接着上一篇《JavaScriptMVC之数据绑定(jquery.tie)》的代码来讲的，不明白之处可以看一下这篇文章。

为了页面一下看清楚，我们把Fixture返回的数据修改为2条。

因为我们使用了Tie，所以我们在代码中要引入这个插件，其实很简单，在最终代码中我们会看到。

为了让大家很容易看懂，所以，这个例子只是简单讲解了name这个字段如何绑定到输入框中，而且当输入框的值变化时，表格中对应的值也更新。

修改视图代码1(message.ejs)：

<h3>
<!--
	在这里我们需要修改这个地方，给名字值外层再加一个span，而且带一个对应属性名的class=name，
        这个是方便我们定位到应该更新表格那个元素
-->
<span class="name"><%= name %></span>
 <a href='javascript://' class='destroy'>X</a><a href='javascript://' class='update'>U</a></h3>
<p><%= description %></p>

修改Controller控制器代码2(list.js)：

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(){
		this.element.html(this.view('init',Cookbook.Models.Message.findAll({
			group:["description"]
		})) )
	},
	'.destroy click': function( el ){
		if(confirm("Are you sure you want to destroy?")){
			el.closest('.message').model().destroy();
		}
	},
	//当点击U时，name字段会绑定到name的Input输入框上
	'.update click':function(el){
		//获取修改行的绑定到视图上的Model
		var model = el.closest(".message").model();
		//获取ID为name的Input输入框上是否已经绑定过Tie
		var tie = $("#name").controller("tie");
		//如果有，则把绑定删除
		if(tie){
			tie.destroy();
		}
		//给Model绑定一个name的事件监听，并且把处理函数定位到attrChanged函数，
		//这样当模型name变化时，会执行这个函数来处理视图
		model.bind("name",this.callback("attrChanged"));
		//把Model模型中name字段绑定到ID为name的Input输入框上
		$("#name").tie(model,"name");
	},
	/**
	*	模型中的Name字段值变化后，触发name事件，执行这个处理函数。
	*   这个处理函数是监听模型字段name值变化，而及时更新表格视图
	*
	*   @function attrChanged
	*	@param{event} ev 事件对象
	*   @param{string} val name修改后的值
	**/
	attrChanged:function(ev,val){
		//ev.target.elemnts()代表是事件对象目标元素，则是视图中对应那一行(h3)
		//ev.type的值是name，即是说修改name字段的值
		//find("."+ev.type)代表查找到表格中对应的html，然后把这个html(val)更新。
		//这样视图就是响应模型的单个字段的变化，当然这里是会变化的，
                //因为我们后续真正的项目中可以用到其它
		//的HTML标签，但是道理和写法都差不多的。
		ev.target.elements().find("."+ev.type).html(val);
	},
	"{Cookbook.Models.Message} destroyed" : function(Message, ev, message) {
		message.elements(this.element).remove();
	},
	"{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) );
	}
});

});

 

至此，我们要讲解的数据绑定就结束了，当然还存在很多变化，这就是我们在实际项目中所需要改变的。这里，只是给一个进门的例子而已。