Backbone.js学习笔记——View篇

来源：互联网发布：程序员和运维工程师编辑：程序博客网时间：2024/05/19 06:48

一、概念

Backbone 视图的使用相当方便 — 它不会影响任何的 HTML 或 CSS 代码，并且可以使用任意 Javascript templating library。基本的做法就是，将界面组织到逻辑视图，之后是模型，当模型数据发生改变，视图立刻自动更新，这一切都不需要重绘页面。我们再也不必钻进 JSON 对象中，查找 DOM 元素，手动更新 HTML 了，通过绑定视图的 render 函数到模型的"change" 事件 — 模型数据会即时的显示在 UI 中。

以上是中文backbone.js给出的解释，不太准，建议到英文网。

简而言之：

view 是用来展示model的数据和监听事件，渲染页面的。

二、关键字.

1.el 属性

所有的视图都拥有一个 DOM 元素（el 属性），即使该元素仍未插入页面中去。如果不写则系统默认创建为空div。

如果希望将 el 赋给页面 DOM 中已经存在的元素，直接设置其值为真实的 DOM 元素或 CSS 选择符字符串。

2.render 函数

默认实现是没有操作的。看到这个的时候你就知道其实这个方法如果你不调用它也不会自己调用。重载本函数可以实现从模型数据渲染视图模板，并可用新的 HTML 更新this.el。推荐的做法是在 render 函数的末尾 return this 以开启链式调用。

Backbone 并不知道开发者使用何种templating library。render 函数中可以采用拼字符串，或者利用 document.createElement 创建 DOM 树等等。但还是建议选择一个好的 Javascript templating library。Mustache.js, Haml-js, 以及 Eco 都是很好的选择。因为Underscore.js 已经引入页面了，所以为了防止 XSS 攻击带给数据的安全威胁，_.template 可以使用并是一个很好的选择。

三、例子

以下给出view例子

<!DOCTYPE html><html><head>    <title>Collection</title></head><body><p>Backbone Collection Example</p><hr><span id="animal_atr"></span><label>我的书柜</label><br><div id="tempDiv" style="position:relative;width:30%;height:30%;border:1px solid blue"><ul id="mybooks"><%=bookdesc %></ul><button id="modify">修改书名</button><input id="addInput"></div></body><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script src="http://documentcloud.github.com/underscore/underscore-min.js"></script><script src="http://documentcloud.github.com/backbone/backbone-min.js"></script><script>(function ($) {var bookId = 1;Book = Backbone.Model.extend({defaults : { id:bookId,name:"语文书",desc :"1998中国人民出版社出版",price:"￥100"}})var m = new Book;MyView = Backbone.View.extend({    initialize: function(options){         this.render(); //loadpage     m.bind('change', this.render); //reloadpage    },    render: function() {    alert(m.get('name'));    //$(this.el).find('#mybooks').html(m.get('name'));   //$(this.el).find('#mybooks').html(JSON.stringify(m.toJSON()));    var temp =  _.template($("#mybooks").html(),{bookdesc: JSON.stringify(m.toJSON()});    $(this.el).html(temp);    return this;    },    events:{          'click #modify' : 'modify'     },    modify: function(event){    var name = $('#addInput').val();    m.set('name',name);    }});var myView = new MyView({el: $("#tempDiv")});    })(jQuery);</script></html>

众多不足希望更正.