Backbone 是一个 JavaScript 框架,可用于创建模型-视图-控制器 (model-view-controller, MVC) 类应用程序和单页界面。它试图让 JavaScript 应用程序更清晰结构化,所涉及到的概念有 View, Event, Model, Collection 和 Router,所以新手刚开始接触 Backbone 反而会显得零乱了。再加上网上找来的一些起步教程一上来就把 Event, Model, Collection 或是 Router 揽上了。其实新手最想要一个最简单的真相,因此第一个例子只需用到 View,其他的玩艺暂且搁置。
Backbone 强依赖于 Underscore,jQuery 是可选的,不过为操作 DOM 方便一般都会引用到 jQuery。
最简单的例子,分两步走:
1. Backbone.View.extend(obj) 创建一个 View 类型
2. 创建上一步得到的 View 的实例,实例化时将会调用前一步 obj.initialize() 方法
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script> </head> <body> <div id="container">Loading...</div> </body> </html> <script> var AppView = Backbone.View.extend({ el: '#container', initialize: function(options) { this.render(); }, render: function() { this.$el.html("Hello World"); } }); //上面等于是创建了 AppView 类,还需实例化才行 setTimeout(function(){ var appView = new AppView(); }, 1000); </script>
运行上面的代码,会发现 Loading... 在一秒后被替换成了 Hello World。走通。
有了上头的真切体验,我们才可以再进一步,使用行间模板和页面中声明的模板,模板就会触碰到值的填充,至此隐约也会感觉到 Model 在向我们招手了。
我们在构造 AppView 时可以传入以上的属性,比如传入 el 属性,就写成
var appView = new AppView({el: $('#container')});
这样前面的 AppView 内就可以不用声明 el 属性了。你也可以同样的方式传入 model, id 等属性,属性声明在 View 的定义比较清晰,倘若要 View 的公用性就可在构造时传入属性,这是后话。
Backbone 的对象在初始化之后首先被执行的是 initialize
方法,初始化方法中可能要调用父类的初始化,则在 initialize
方法中头行加上
this.constructor.__super__.initialize.apply(this);
这在要建立自己更深层次的类关系时会有用到,特别是非默认构造。
相关推荐
使用require.js模块化组织应用程序结构 轻量级无限滚动
#Hello-React-Backbone**目的:**做Backbone和ReactJS的整合,该例子使用了Backbone的Model和ReactJS整合,可以认为是ReactJS替换掉了Backbone的View,这个是入门小例子 。**实现内容:**通过传递的json数据构建...
相比React针对View和单向数据流的设计,Backbone更能体现MVC的思路,所以针对它写一篇入门范例,说明如下: 1. 结构上分4节,介绍Model/View/Collection,实现从远程获取数据显示到表格且修改删除; 2. 名为“范例”...
骨干集合视图Backbone.JS 集合和视图快速教程和快速入门这个例子详细说明了集合和视图、事件和模型在单个功能小部件中的实现。
由于它是Backbone View的扩展,因此您也可以使用BackboneGridView.extend以适合您的方式对其进行扩展。构建(通过凉亭拉入第三方资源,运行测试) grunt install测试grunt testjshint grunt jshint用requirejs打包...
1.简介 最近在做一个大型网上银行项目前端的优化,需要使用一个胖客户端的优化,大概思路就是前端通过Ajax 请求去后端获取数据,以Jason的格式返回,然后显示在... 每个模块里面又可以按照BackBone的要求切分成View,
在本项目中用于将 HTML+Rivets 模板加载到Backbone.View继承人中 建筑学 轻量级数据绑定 轻量级模板 功能助手 代码质量 摩卡运行测试 柴断言/期望/应该 jshint 代码质量/分析 jshint-时尚漂亮的打印 JSHint 结果 ...
bbstarter Drupal 主干应用程序的启动器...文件结构 app/ source files css/ js/ models/ backbone models, each as it's own file collections/ backbone collections views/ backbone views app.view.js master view
Rasti是用于构建用户界面的简约JavaScript MV库。 它通过提供可在属性更改时发出事件的以及具有声明性事件处理的来定义UI组件,从而为应用程序提供结构。... import { Model , View } from 'rasti' ;
资源商resourcerer是用于以声明方式获取...和更多它为Model / Collection语义(及其“)使用了一个称为的Backbone的View-less,jQuery-less,Promise接口叉。 入门很容易: 在您的应用程序中定义模型: // js/models/t
流行的MV *库Backbone.js的现代分支。 使用简化的CommonJS AMD格式编写。 特征: 自定义版本: 原始版本(无依赖项)。 全部捆绑(Promise,jQuery,Lo-Dash,Ractive)。 Web组件 范围的样式表。 灵活的标识符...