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”
- 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://www.rainweb.cn/article/backbone-start.html
关注“qietuwang”微信公众号，获取一手干货内容推送
本文由切图网原创，转载请保留版权：
初识backbone
https://www.qietu.com/cn/new-to-backbone/
微信扫一扫二维码访问
