Backbone JS框架指南

Posted Mar.13, 2011 under Frontend Design , RIA Technology

除非特别声明，所有日志都遵循 创作共用 版权协议，署名－非商业
需要用链接 的方式指明文章作者来源：Bruce Dou

Backbone 是一个前端 JS 代码 MVC 框架，被著名的 37signals 用来构建他们的移动客户端。它不可取代 Jquery，不可取代现有的 template 库。而是和这些结合起来构建复杂的 web 前端交互应用。

如果项目涉及大量的 javascript 代码，实现很多复杂的前端交互功能，首先你会想到把数据和展示分离。使用 Jquery 的 selector 和 callback 可以轻松做到这点。但是对于富客户端的WEB应用大量代码的结构化组织非常必要。

Backbone 就提供了 javascript 代码的组织的功能。Backbone 主要包括 models, collections, views 和 events, controller 。

Models 用来创建数据，校验数据，存储数据到服务器端， Collections 包含你创建的 functions ，Views 用来展示数据。

Models 还可以绑定事件。比如用户动作变化触发 models 的 change 事件，所有展示此model 数据的 views 都会接收到 这个 change 事件，进行重绘。

事件的绑定和触发

以下是object 绑定 alert 事件和匿名回调函数的代码例子，object 之后 触发 alert 事件，并且传入参数 “an event”

var object = {
}
;
 
_.extend(
object, Backbone.Events)
;
 
object.bind(
"alert", function(
msg)
 {

  alert(
"Triggered " + msg)
;
}
)
;
 
object.trigger(
"alert", "an event")
;

假如你的网页上事件很多也可以用proxy的方式来分发所有事件：

proxy.bind(
"all", function(
eventName)
 {

  object.trigger(
eventName)
;
}
)
;

Backbone 的 Models 是应用的核心

他包含了数据对象的属性，操作数据对象的函数。还实现和服务端交互的动作。

以下是定时从服务器端更新 channel 的数据：

// Poll every 10
 seconds to keep the channel model up-to-date.
setInterval(
function(
)
 {

  channel.fetch(
)
;
}
, 10000
)
;

以下是存储 book 的数据，这里通过重载 sync 函数，只让数据 alert 出来，sync 中的默认触发事件包括 fetch save refresh

Backbone.sync = function(
method, model)
 {

  alert(
method + ": " + JSON.stringify(
model)
)
;
}
;
 
var book = new Backbone.Model(
{

  title: "The Rough Riders",
  author: "Theodore Roosevelt"
}
)
;
 
book.save(
)
;

Backbone 的 Controller 用来对 URL 和事件进行绑定

以下下例子中，分别将不同的以#开头的 URL 片段 绑定到不同的函数，实现服务器端 MVC 模型中的 router 一样的功能

var Workspace = Backbone.Controller.extend(
{

 
  routes: {

    "help":                 "help",    // #help
    "search/:query":        "search",  // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7
  }
,
 
  help: function(
)
 {

    ...
  }
,
 
  search: function(
query, page)
 {

    ...
  }

 
}
)
;

值得提出的是 Backbone 的 router 也支持正则表达式的匹配

initialize: function(
options)
 {

 
  // Matches #page/10
, passing "10
"
  this.route(
"page/:number", "page", function(
number)
{
 ... }
)
;
 
  // Matches /117
-a/b/c/open, passing "117
-a/b/c"
  this.route(
/^(
.*?)
\/open$/, "open", function(
id)
{
 ... }
)
;
 
}

Backbone 的 Sync 默认通过调用Jquery的ajax方法来实现和服务器端的交互，实现数据的 CURD

比如 fetch 方法会触发 read 事件

Backbone 的 Views 用来接收用户的操作和修改 Model 的数据 ，另外通过 render 来展示数据

默认 render 并没有实现，你可以用 Mustache.js 或者 Underscore.js 来实现。

以下是接收用户操作的代码例子：

var DocumentView = Backbone.View.extend(
{

 
  events: {

    "dblclick"                : "open",
    "click .icon.doc"         : "select",
    "contextmenu .icon.doc"   : "showMenu",
    "click .show_notes"       : "toggleNotes",
    "click .title .lock"      : "editAccessLevel",
    "mouseover .title .date"  : "showTooltip"
  }
,
 
  render: function(
)
 {

    $(
this.el)
.html(
this.template(
this.model.toJSON(
)
)
)
;
    return this;
  }
,
 
  open: function(
)
 {

    window.open(
this.model.get(
"viewer_url")
)
;
  }
,
 
  select: function(
)
 {

    this.model.set(
{
selected: true}
)
;
  }
,
 
  ...
 
}
)
;

以下是数据渲染 render 的例子

var Bookmark = Backbone.View.extend(
{

  render: function(
)
 {

    $(
this.el)
.html(
this.template(
this.model.toJSON(
)
)
)
;
    return this;
  }

}
)
;

参考

http://documentcloud.github.com/backbone/

http://documentcloud.github.com/backbone/examples/todos/index.html