双向绑定在很多js框架(AngularJS、knockout等)中都得到了支持,尤其在MVVM模式中,更是其核心机制。Backbone实现的是MVC模式,虽然没有直接提供双向绑定功能,但我们可以通过他的各种事件来达到这样的效果。
backbone的Model和View中都提供了对于事件的监听功能。Model中可以通过bind()监听属性值的变化,而View可以对dom元素进行监听。这样当view监听到dom元素值变化时,获取dom元素(如:文本框)的值直接更新到model中,这样就触发了model的数据改变事件(change), 在这个改变事件的处理函数中调用View的render方法重新渲染ui。这样就可以达到双向绑定,同步更新的效果。
下面是个简单的demo,与"书名"进行了绑定,可在文本框中改变书名来演示同步效果。
效果演示:
引入js库
<script type="text/javascript" src="http://www.see-source.com/js/backbone/jquery-1.8.1.js"></script> <script type="text/javascript" src="http://www.see-source.com/js/backbone/underscore.js"></script> <script type="text/javascript" src="http://www.see-source.com/js/backbone/backbone.js"></script>Html代码
<span id="mydemo"></span><br/> <a href="javascript:void(0)" onClick="getModelValue()">查看model值</a>Js代码
<script type="text/javascript">
// 定义Book(图书)模型类
var Book = Backbone.Model.extend({
defaults : {}
});
// 实例化模型对象
var javabook = new Book({
name : 'javascript 权威指南',
author : 'David Flanagan',
price : 100
});
//创建视图
var BookView = Backbone.View.extend({
el:"#mydemo",
//model:javabook,
initialize : function(){
this.model.bind('change' , this.render, this); //模型数据改变时,重新渲染ui
this.render();
},
events : {
'blur #mybook' : 'updateModel'//失去焦点事件
},
render : function() {//alert("渲染");
this.el.innerHTML = "书名:<input id='mybook' type='type' value='"+this.model.get("name")+"'><br/>"
+"作者:"+this.model.get("author") +"<br/>"
+"价格:"+this.model.get("price") +"<br/><br/>"
+"<span>书名:"+this.model.get("name")+"</span>";
},
updateModel : function() {
this.model.set("name", $("#mybook").val());//更新model
}
});
var theBookView = new BookView({model:javabook});
//listview.render();
</script>
<script type="text/javascript">
function getModelValue(){
alert(javabook.get("name"));
}
</script>
在view的构造方法(initialize)中将渲染方法(render)绑定到model的change事件上,这样每当model的数据改变时,都会调用render重新渲染UI。另外,我们对输入书名的文本框绑定了blur事件,处理函数为updateModel,这样,当输入书名后,updateModel方法会将文本框的值读取出来更新到model中,与此同时会触发model的change事件,将model重新渲染到UI中。
以上代码可直接运行。