关于Backbone是什么，就不用我多介绍了，不知道的这货是什么的话请直接忽略本文吧。本文只是作为本人学习这货的一个笔记，顺大便给其他学习者参考一下。
View
首先从View部分开始，第一个程序注定是从hello world开始。
在开始之前，先创建一个HTML文件，在其中引用这三个JS库（注意：underscore要在backbone前面）：
jquery.jsunderscore.jsbackbone.js
页面的内容就随意了，下面的例子要求页面中包含一个<div id="body" />节点。
然后创建一个最简单的View：
var TestView = Backbone.View.extend({ // 创建一个view，其实就是一个HTML的DOM节点 render: function() { // 渲染方法 this.$el('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('<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")()); // 模板放这里一般没问题 this.render(); }, render: function() { this.$el(this.template({message: "hello world!"})); // 渲染模板 return this; }, toggle: function() { this.$("#hello").toggle(); return this; } });再刷新页面看看。效果与上一个例子相同，但是单独的HTML模板使代码清晰很多，也便于修改。
（待续）