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节点
    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模板使代码清晰很多,也便于修改。

(待续)

推送到[go4pro.org]