Backbone.js入门教程

原文: Getting Started with Backbone.js

不像其它的Web开发语言,过去Javascript很少可用的架构.令人感到高兴的是,最近几年这种情况得到非常大的改善.

今天我要高兴的像你介绍backbont.js. 一个能够非常容易创建复杂的,交互式数据驱动应用但却非常小巧的框架.她提供

了简单清楚的方法把数据从表现层中分离出来.

Overview和FAQ我就不多翻译了.

开始了解Backbone.js

Backbone.js由四个大类构成

Model
Collection
View
Controller

Model

在MVC的架构中不同对象的Model有不同的实现方法,在Backbone.js中model可以表示一个单独的实例,或一条数据库的记录不过这里并没有硬性的规定.以下来自于Backbone.js网站.

Models are the heart of any JavaScript application,

containing the interactive data as well as a large part of

the logic surrounding it: conversions, validations,

computed properties, and access control.

模块是所有的Javascript应用程序的核心. 包含了数据交互以及大部分的逻辑处理,数据转换,数据验证,计算,还有权限控制.

Backbone.js中定义的Model仅仅只是给你提供一个方法自由的扩展属性并设置属性值得方法.根据这个思路,以下是一个完整的Model定义.

var Game = Backbone.Model.extend({});

让我们在此基础上来构建它.

var Game = Backbone.Model.extend({
    initialize:function(){
       alert("oh Hey!!");
    },
    defaults:{
       name:"default title",     
       releaseDate: 2011
    }
});

'initialize'是在一个对象实例完成后触发,这里仅仅一句消息提醒. 你可以在这里数据引导,或者其它一些操作.我还定义了一个默认的版本.这个例子没有传递数据.

在我们想要学习怎么编辑属性前,我们先创建一个实例

// 创建新Game
var portal = new Game({ name: "Portal 2", releaseDate: 2011});
 
// 将对象的releaseDate属性值赋给release变量
var release = portal.get('releaseDate');
 
// 修改对象的name属性值
portal.set({ name: "Portal 2 by Valve"});

如果你注意到了get/set的方法, 它的优点是不让你使用object.attribute的方法来读写数据,你只能用修改器来操作

这样能降低数据出错的几率.

到此为止,所有的操作都是在内存中, 让我们来点和服务器做交互的动作.

portal.save();

就这么一行,你希望更多,放心这行代码会发送一个请求到你的服务器. 这个请求会自动调用POST或者PUT
方法去创建一个新的对象.

这里还可以有很多的功能,Backbone给你定义一个缺省的方法,其余的由你自己去做.

Collection

Collection在Backbone里指的就是model的集合.为了更容易的和数据库保持同步.集合可以是从数据库查询的几条记录(model).

我们可以这样定义一个Collection.

var GameCollection = Backbone.Collection.extend({
  model:Game
});

你注意到这个Collection只是为集合定义了集合中数据的model,我们还要得到以一些实际的数据.

现在你可以对你model做一些操作,例如得到一些指定内容的games.

var GameCollection = Backbone.Collection.extend({
    model: Game,
    old: function(){
       return this.filter(function(game){
          return game.get("releaseDate") < 2009;
       });
    }
});

是不是很简单,我们仅仅需要检查一下releaseDate是不是小于2009然后返回这个game就可以.

我们也能直接通过操作Collection来活得数据,想这样:

var games = new GameCollection;
games.get(0);

上面的代码实例化了一个新的Gamecollection并且查找ID为0的model数据.你也可以通过索引查找指定位置的元素.

例如:games.at(0);

最后你的集合应该是动态数据.像这样:

var GameCollection = Backbone.Collection.extend({
  model: Game,
  url: '/games'
});

var games = new GameCollection;
games.fetch();

我们通过url属性告诉Backbone去哪里得到数据,做完这些后我们创建一个新的实例,通过调用fetch()方法异步的

向服务器发送请求并返回结果.

以上涵盖了Collection的所有基础,就像我提到的,Backbone就是把仓库里成吨的各种货物分门别类.在你开始之前

最好快速的阅读一下官方的文档.

View

初看Backbone里的view会觉得有点乱.对于纯粹的MVC框架来说,它更像是Control而不是view.

总的来说它负责两方面

监听文档DOM和model或者collection的事件.
将应用程序状态和数据模型表现给用户

来建一个简单的view

Gameview = Backbone.View.extend({
  tagName: 'div',
  className: 'game',
  render: function(){
     //渲染view的html代码
  }
});

到目前为止一切都很简单, 我们指定了要使用的html元素是什么,还使用className属性作为标签的id.

接下来看看如何渲染

render: function(){
  this.el.innerHtml = this.model.get("name");
 
  //或者使用JQuery的方式
  $(this.el).html(this.model.get("name"));
}

el指向view中DOM元素的引用. 很简单的我们把game的name属性显示在了div标签内内.如果你以前用过JQuery

使用JQuery的方法也可以.

这样的方法处理起复杂的html就显得很笨了,这时候使用模版就很有必要Backbone包含的小型的Underscroe.js模版方案,你也可以自己选择更好的方案.

最后我们看看View是如何监听event的.

events:{
  'click .name': 'handleClick'
},
handleClick: function(){
  alert("In the name of science... you monster");
}

如果你直接使用过event那很容易能理解这些,我们定义了一个事件,并且对有一个对象进行了监听.

首先定义一个events,接下来指出触发事件的元素'click .name'. 最后完成触发事件后要执行的方法handleClick.

接下来就是应该怎么把view绑定上model或者collection.

GameView = Backone.View.extend({
  initialize: function(args){
    _.bindAll(this,'changeName');
    this.model.bind('change:name',this.changeName);
  }
});

首先是为什么我们要把bind的代码写到initialize方法里,当然是初始化的时候做最好了.

bindAll这个方法是Underscore.js提供的一个工具,这个工具特别有用,它把一系列的功能结合在了一起,

特别是还没有回调函数.

现在只要model的属性发生变化就会调用changeName方法. 你也可以删除或者修改监听的动作.

监听collectin的方法和监听model一样简单,只要把model换成collection就可以了.

Controller

控制器在Backbone.js里基本上就是让你创建书签.用hashbangs来表现应用状态.

var hashbangs = Backbone.Controller.extend({
  routes: {
    "!/": "root",
    "!/games" "games"
  },
  root: function(){

  },
  games: function(){

  }  
});

这在传统服务器端MVC中非常常见.当url指向domain/#!/games.时games方法将会执行.

灵活应用hashbangs的标签化功能你可以创建基于JS的复杂应用.

如果你担心浏览器返回按钮的问题.Backbone也为你想到了.

var ApplicationController = new Controller;
Backbone.history.start();

通过上面的方法,Backbone.js可以把你之前的路由记录下来. 使你的应用程序标签化.

我从Backbone学到了什么?

总的来说通过这个教程我知道了怎么用Backbone的方式创建一个应用程序.

我们的确需要一个前端的MVC框架. 传统的代码太混乱,耦合度高,不容易理解,难以维护.
数据存储在DOM中是一种不好的方式, 当同一数据更新时应用程序不同部分同时更新更有意义.
大模型(models)小控制器(controllers),流程容易控制. 业务逻辑只关注模型(models)就可以了.
模版是必须的,如何把html代码都加在Javascript是会倒霉的.

对我们来说,这足以说明Backbone对于前端开发来说是一个极大的改变. 这个教程还是很笼统,相信大家还有很多问题.

期待下一个更详细的Backbone.js教程.