backbone中实现的双向绑定效果
2013-05-14 14:38 阅读(209)

双向绑定在很多js框架(AngularJS、knockout等)中都得到了支持,尤其在MVVM模式中,更是其核心机制。Backbone实现的是MVC模式,虽然没有直接提供双向绑定功能,但我们可以通过他的各种事件来达到这样的效果。

backbone的Model和View中都提供了对于事件的监听功能。Model中可以通过bind()监听属性值的变化,而View可以对dom元素进行监听。这样当view监听到dom元素值变化时,获取dom元素(如:文本框)的值直接更新到model中,这样就触发了model的数据改变事件(change), 在这个改变事件的处理函数中调用View的render方法重新渲染ui。这样就可以达到双向绑定,同步更新的效果。

下面是个简单的demo,与"书名"进行了绑定,可在文本框中改变书名来演示同步效果。

效果演示:


查看model值



引入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中。

以上代码可直接运行。