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教程.