Backbone札记之一（View）

关于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节点
    render: function() {  // 渲染方法
        this.$el.html('Hello World');  //  this.el就是HTML节点，通过jQuery的html方法填充内容
        return this;
    }
});

new TestView({el: $('#body')});  //  以目标节点（一个 <div id="body" />）为el参数，创建一个view的实例，render函数将会被自动调用并将渲染结果填充到el中

原理见注释。

放到浏览器里看看效果吧。

事件响应

试一个简单的效果：点击隐藏。

把上面的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; 
        } 
    });

刷新页面，点击按钮试试。

模板

代码里嵌入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模板使代码清晰很多，也便于修改。

（待续）