关于Backbone是什么，就不用我多介绍了，不知道的这货是什么的话请直接忽略本文吧。本文只是作为本人学习这货的一个笔记，顺大便给其他学习者参考一下。
View
首先从View部分开始，第一个程序注定是从hello world开始。
在开始之前，先创建一个HTML文件，在其中引用这三个JS库（注意：underscore要在backbone前面）：
- jquery.js
- underscore.js
- backbone.js
页面的内容就随意了，下面的例子要求页面中包含一个<div id="body" />节点。
然后创建一个最简单的View：
- var TestView = Backbone.View.extend({ // 创建一个view，其实就是一个HTML的DOM节点
- initialize: function() {
- this.render();
- },
- render: function() { // 渲染方法
- this.$el.html('Hello World'); // this.el就是HTML节点，通过jQuery的html方法填充内容
- return this;
- }
- });
- $(function () {
- var v = new TestView({el: $('#body')}); // 以目标节点（一个 <div id="body" />）为el参数，创建一个view的实例，render函数将会被自动调用并将渲染结果填充到el中
- //v.render(); // 如果没在 initialize 里调用 render 的话，就需要在这里调用一次
- });
原理见注释。
放到浏览器里看看效果吧。
事件响应
试一个简单的效果：点击隐藏。
把上面的View改成这样：
- var TestView = Backbone.View.extend({
- events: {
- 'click button#toggle' : 'toggle' // 响应toggle button的click事件
- },
- initialize: function() {
- this.render();
- },
- render: function() {
- this.$el.html('<p id="hello">Hello World</p><button id="toggle">Toggle</button>'); // 增加一个toggle button
- return this;
- },
- toggle: function() {
- $("#hello").toggle(); // 用jQuery的toggle方法切换显示
- return this;
- }
- });
刷新页面，点击按钮试试。
注意，如果 events 里用的是非唯一的绑定，可以通过以下方式取得发生事件的对象：
- // ...
- 'click button.show': 'showItem'
- // ...
- showItem: function (e) {
- alert($(e.currentTarget));
- }
模板
代码里嵌入HTML是很麻烦的事情，所以模板是需要的。
理论上可以在backbone里使用任何JavaScript模板，这里以underscore自带的template为例。
先按模板的语法在HTML文件里写一个模板：
- <script type="text/template" id="hello-template">
- <div>
- <h3 id="hello">${message}</h3>
- <button id="toggle">Toggle</button>
- </div>
- </script>
为了不影响页面的正常显示，JS模板通常都是放在 text/template 类型的 script 标签里。
注意，因为习惯的问题，模板里的变量标记没有使用默认的<%= %>，而是改成和python mako里一样的 ${ }，为此需要修改underscore的模板设置如下：
- _.templateSettings = {
- interpolate : /\$\{(.+?)\}/g
- };
而显示模板的方法如下：
- var TestView = Backbone.View.extend({
- template: null, // 把模板直接放这里有时也可以，但有时又会出错，还不知道是什么原因
- events: {
- 'click button#toggle' : 'toggle'
- },
- initialize: function() {
- this.template = _.template($("#hello-template").html()); // 模板放这里一般没问题
- this.render();
- },
- render: function() {
- this.$el.html(this.template({message: "hello world!"})); // 渲染模板
- return this;
- },
- toggle: function() {
- this.$("#hello").toggle();
- return this;
- }
- });
再刷新页面看看。效果与上一个例子相同，但是单独的HTML模板使代码清晰很多，也便于修改。
（待续）
转自 http://blog.csdn.net/raptor/article/details/8566017，感谢原作者的无偿提供，本人只做收藏之用，觉得不错就分享了。
转载请注明：阿尤博客 » Backbone笔记之一（View）