双向绑定在很多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中。
以上代码可直接运行。