除非特别声明,所有日志都遵循 创作共用
版权协议,署名-非商业
需要用链接
的方式指明文章作者来源: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
分享到:
相关推荐
backbone.js提供了一套web开发的框架,为复杂javascript应用程序提供一个mvc结构。, 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始,...
JavaScript的Backbone.js框架入门学习指引_.docx
backbone.js提供了一套web开发的框架,为复杂javascript应用程序提供一个mvc结构。, 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始,...
JS MVC框架(BackBone),主要包括两层:Model 和 View. Model 是用于数据交互 View 是用于界面显示的
1.backbone+require+jquery前端框架 2.包容性极强,现有的js插件几乎都能在本框架使用 3.健壮很稳定性极好。**开发了很多项目,都用的本框架,权限验证在本框架也很容易做 4.精心整理,有很多使用的注释,及文档支持
实例讲解JavaScript的Backbone.js框架中的View视图_.docx
You'll learn how to create structured JavaScript applications, using Backbone's own flavor of model-view-controller (MVC) architecture. Start with the basics of MVC, SPA, and Backbone, then get your ...
Backbone.js提供了一套Web开发的框架,为复杂的JavaScript应用程序提供了一个MVC结构。 《Backbone.js应用程序开发》详细介绍了如何使用Backbone.js完成Web应用开发。全书从了解MVC、SPA和Backbone.js的基本知识...
backbone.js,underscore.js,jquery-1.10.2.js
backbone.js框架的简单入门教程,教程目的就是让初学者快速在项目中运用backbone.js
Backbone框架包完整版,Backbone-min.js,jQuery v2.0.1.js,Underscore.js 1.5.0.js
Backbone.js框架中Model与Collection的使用实例.docx
backbone.js提供了一套web开发的框架,为复杂javascript应用程序提供一个mvc结构。 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始,...
Backbone.js框架中简单的View视图编写学习笔记.docx
Backbone.js框架中Model与Collection的用法实例_.docx
Backbone.js是十大JS框架之首,Backbone.js 是一个重量级js MVC 应用框架,也是js MVC框架的鼻祖。它通过Models数据模型进行键值绑定及custom事件处理,通过模型集合器Collections提供一套丰富的API用于枚举功能,...
详解Backbone.js框架中的模型Model与其集合collection_.docx
Backbone.Marionette 是 Backbone.js 的一个组合应用库,简化了大规模 JavaScript 应用的开发。包含一组常用的设计模式。Marionette Inspector 标签:Marionette
backbone是一种帮助开发重量级的javascript应用的框架。 主要提供了3个东西:1、models(模型) 2、collections(集合) 3、views(视图) backbone.js文件本身很小,压缩后只有5.3KB,作为一个框架级别的核心JS文件,这个...