2013年4月21日

初识backbone


backbone.js,是开发web app的框架。凭借它,我们可以使用javascript编写复杂交互的web app,因为backbone提供了强大的对模型、视图和交互的抽象。 以前,我们开发web app,比较依赖比如jQuery.js、underscore.js:

  • 将所有交互看作对dom节点的操作,虽然也可通过事件(event)解藕复杂的交互,但是无法脱离dom模型,包括事件的传递,都是沿着dom树进行的;
  • 即使是有起到模型作用的对象,一般也通过jQuery附着在dom树上

 

通过backbone,你可以把你的数据当作Models,通过Models你可以创建数据,进行数据验证,销毁或者保存到服务器上。当界面上的操 作引起 model中属性的变化时,model会触发change的事件;那些用来显示model状态的views会接受到model触发change的消息,进 而发出对应的响应,并且重新渲染新的数据到界面。在一个完整的backbone应用中,你不需要写那些胶水代码来从DOM中通过特殊的id来获取节点,或 者手工的更新HTML页面,因为在model发生变化时,views会很简单的进行自我更新。

事件的绑定和触发

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

JavaScript代码
  1. var object = {};
  2. _.extend(object, Backbone.Events);
  3. object.bind(“alert”, function(msg) {
  4.   alert(“Triggered ” + msg);
  5. });
  6. object.trigger(“alert”, “an event”);

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

JavaScript代码
  1. proxy.bind(“all”, function(eventName) {
  2.   object.trigger(eventName);
  3. });

Backbone 的 Models 是应用的核心

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

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

JavaScript代码
  1. // Poll every 10 seconds to keep the channel model up-to-date.
  2. setInterval(function() {
  3.   channel.fetch();
  4. }, 10000);

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

JavaScript代码
  1. Backbone.sync = function(method, model) {
  2.   alert(method + “: ” + JSON.stringify(model));
  3. };
  4. var book = new Backbone.Model({
  5.   title: “The Rough Riders”,
  6.   author: “Theodore Roosevelt”
  7. });
  8. book.save();

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

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

JavaScript代码
  1. var Workspace = Backbone.Controller.extend({
  2.   routes: {
  3.     “help”:                 “help”,    // #help
  4.     “search/:query”:        “search”,  // #search/kiwis
  5.     “search/:query/p:page”: “search”   // #search/kiwis/p7
  6.   },
  7.   help: function() {
  8.     …
  9.   },
  10.   search: function(query, page) {
  11.     …
  12.   }
  13. });

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

JavaScript代码
  1. initialize: function(options) {
  2.   // Matches #page/10, passing “10”
  3.   this.route(“page/:number”, “page”, function(number){ … });
  4.   // Matches /117-a/b/c/open, passing “117-a/b/c”
  5.   this.route(/^(.*?)/open$/, “open”, function(id){ … });
  6. }

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

比如 fetch 方法会触发 read 事件

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

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

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

JavaScript代码
  1. var DocumentView = Backbone.View.extend({
  2.   events: {
  3.     “dblclick”                : “open”,
  4.     “click .icon.doc”         : “select”,
  5.     “contextmenu .icon.doc”   : “showMenu”,
  6.     “click .show_notes”       : “toggleNotes”,
  7.     “click .title .lock”      : “editAccessLevel”,
  8.     “mouseover .title .date”  : “showTooltip”
  9.   },
  10.   render: function() {
  11.     $(this.el).html(this.template(this.model.toJSON()));
  12.     return this;
  13.   },
  14.   open: function() {
  15.     window.open(this.model.get(“viewer_url”));
  16.   },
  17.   select: function() {
  18.     this.model.set({selected: true});
  19.   },
  20.   …
  21. });

以下是数据渲染 render 的例子

JavaScript代码
  1. var Bookmark = Backbone.View.extend({
  2.   render: function() {
  3.     $(this.el).html(this.template(this.model.toJSON()));
  4.     return this;
  5.   }
  6. });

http://www.rainweb.cn/article/backbone-start.html

标签:,

微信扫一扫二维码访问