Backbone.js框架中简单的View视图编写学习笔记

传统上用jQuery操作DOM，就类似C语言中的goto语句，随着项目复杂度增大，会越来越难以维护。
关于MVC（以及后续的MVP，MVVM），网上资源很多，就不展开。我们直接用代码来操练。

index.html<！doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Backbone</title></head><body><div class="wrapper"></div><script src="js/lib/jquery.min.js"></script><script src="js/lib/underscore-min.js"></script><script src="js/lib/backbone-min.js"></script><script src="build/x.js"></script></body></html>

其中，x.js是用duo生成后的js。文件中引用的几个js，都可以从百度静态资源库中下载到
1.js

var ListView = Backbone.View.extend（{ //el: $（".wrapper"）, // 初始化函数，new时，backbone会自动调用 initialize: function（） {this.render（）; }, // 真正把修改操作同步到浏览器中 render: function（） {this.$el.append（"<ul><li>Hello techfellow！</li></ul>"）; }}）;var listView = new ListView（{el: $（".wrapper"）}）;

执行：

$duo 1.js

知识点说明

el：表示该View所代表的DOM元素，在render函数中，会同步到DOM操作中去。
initialze：调用new时，会触发的函数调用，类似构造函数。
render：触发DOM操作，浏览器会渲染
最后一句，说明在new时，可以传递参数

疑惑
如果写成 new ListView（{el: ".wrapper"}）也是可以的。
但考虑到el本身的含义，还是加上$更清晰些。

$el和$（）
$（this.el）等价于 this.$el
$（this.el）.find（".wrapper"）等价于 this.$（".wrapper"）

setElement
如果想修改el内容，包括值和绑定事件，可以使用setElement。下面这个例子中，setElement不仅仅把el的引用从button1改为button2，连click事件也同步修改过去了。

// We create two DOM elements representing buttons// which could easily be containers or something elsevar button1 = $（"<button></button>"）;var button2 = $（"<button></button>"）;// Define a new viewvar View = Backbone.View.extend（{ events: {click: function（e） { console.log（view.el === e.target）;} }}）;// Create a new instance of the view, applying it// to button1var view = new View（{el: button1}）;// Apply the view to button2 using setElementview.setElement（button2）;button1.trigger（"click"）;button2.trigger（"click"）; // returns true

事件处理和模板解析都是前端渲染必需的工作，backbone一般把这些内容放到View里面统一处理。
2.js

var ListView = Backbone.View.extend（{ el: $（".wrapper"）, events: {"click button#add": "addItem" }, // 初始化函数，new时，backbone会自动调用 initialize: function（） {// 用于计数this.counter = 0;this.render（）; }, // 真正把修改操作同步到浏览器中 render: function（） {this.$el.append（"<button id="add">点击添加</button><ul></ul>"）; }, // event handler addItem: function（） {this.counter++;this.$（"ul"）.append（"<li>Hello techfellow, " + this.counter + " time（s）"）; }}）;var listView = new ListView（）;

执行：

$duo 2.js

知识点

this.counter：内部使用的数据，可以initialize中初始化
events：声明格式，"event selector": "func"，这比之前$（".wrapper button#add"）.on（"click", function（）{...}）; 的方式要清晰许多了。

模板
在index.html中加入：

<script type="text/template" id="tplItem"><li>Hello techfellow, <%= counter %> time（s）</li></script><！--要放在2.js前面，否则在执行时，可能遇到找不到tplItem的情况--><script src="build/2.js"></script>

在View的声明中修改：

events: { "click button#add": "addItem"},template: _.template（$（"#tplItem"）.html（））,

修改addItem：

addItem: function（） { this.counter++; this.$（"ul"）.append（this.template（{counter: this.counter}））;}

同理，这里的模板可以替换为任何第三方模板引擎。
比如：artTemplate

var template = require（"./lib/template.js"）;...this.$（"ul"）.append（template（"tplItem", {counter: this.counter}））;...