如果开发过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) );
}
});
});
至此,我们要讲解的数据绑定就结束了,当然还存在很多变化,这就是我们在实际项目中所需要改变的。这里,只是给一个进门的例子而已。
分享到:
相关推荐
谈谈JavaScriptMVC模式共3页.pdf.zip
javascriptmvc-3.2.4.zip
javascriptmvc-3.3.zip
上传了一半的javascriptmvc3.0.5,这个是【下】
JavascriptMVC代码
可将应用分成数据层、UI层和控制层。Mithril 压缩后只有 3kb 左右。API 提供一个模板引擎,带 DOM diff 实现,支持路由和组合。 示例代码: //namespace var app = {}; //model app.PageList = ...
NULL 博文链接:https://lyndon-lin.iteye.com/blog/1556095
Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fx 10大新的最具潜力JS框架 1.SproutCore 2. Spry 3. JavaScriptMVC 4. Qooxdoo 5. midori 6. Archetype JavaScript Framework 7....
MVC框架 JavaScriptMVC ,JavaScriptMVC 是一个 JavaScript 的 MVC 框架,通过它可以简化项目的开发...
JavaScriptMVC, Backbone.js, Spine.js, Sammy.js JavaScript应用设计模式 依赖管理 JavaScript建模 Cross-browser persistent storage Feature detection Widgets & Component库 单元测试、测试环境 构建...
javaScriptMVC开源框架,是一个不错的前端界面MVC框架,是在jquery等开源项目的基础上建立的
javascript的mvc框架。类似于java的mvc框架
javaScriptMVC开源框架,是一个不错的前端界面MVC框架,是在jquery等开源项目的基础上建立的 说明:此文件解压后和第一部分文件夹必须放到一起才能正确使用
javascriptmvc3.0.5,文件大于20MB,分成两个卷
介绍模板引擎和数据绑定 讲解远程数据加载、第二代Ajax以及跨域请求 利用WebSockets和Node构建实时应用 拖拽上传文件以及上传进度提示 讲解主流的库和框架,包括jQuery、JavaScriptMVC以及Backbone 编写测试...
NULL 博文链接:https://lyndon-lin.iteye.com/blog/1484876
NULL 博文链接:https://lyndon-lin.iteye.com/blog/1485743
JavaScript框架包括:MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScriptMVC、GoogleWebToolkit、GoogleClosure、Ember、Batman以及ExtJS等等 其中一些框架也使用$符号作为简写 如果,用的两种不同的框架...
Live Handlebars 是一组与 CanJS(以前称为 JavaScriptMVC)一起使用的 Handlebars 助手,它允许您将can.Observe绑定到 DOM 元素。 帮手 有两种基本的实时绑定助手。 一个旨在绑定到单个属性。 即,bindHtml、...