文档章节

Backbone.js HelloWorld,应用起步

heroShane
 heroShane
发布于 2014/02/04 15:59
字数 711
阅读 246
收藏 0


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() 方法

上代码(为方便起见,所有 JS 脚本都从公网上加载):

<!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>

点击 http://jsfiddle.net/Unmi/CyNM9/ 运行上面的代码,会发现 Loading... 在一秒后被替换成了 Hello World。走通。

有了上头的真切体验,我们才可以再进一步,使用行间模板和页面中声明的模板,模板就会触碰到值的填充,至此隐约也会感觉到 Model 在向我们招手了。

代码中使用字符串模板或用 <script type="text/template"/> 声明的模块,这里不多介绍,下篇再讲。

多加一点,关于 View 的构造,参考 Backbone.View 的实现 var View = Backbone.View 中的

// List of view options to be merged as properties.
  var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];

我们在构造 AppView 时可以传入以上的属性,比如传入 el 属性,就写成

var appView = new AppView({el: $('#container')});

这样前面的 AppView 内就可以不用声明 el 属性了。你也可以同样的方式传入 model, id 等属性,属性声明在 View 的定义比较清晰,倘若要 View 的公用性就可在构造时传入属性,这是后话。

Backbone 的对象在初始化之后首先被执行的是 initialize 方法,初始化方法中可能要调用父类的初始化,则在  initialize 方法中头行加上

this.constructor.__super__.initialize.apply(this);

这在要建立自己更深层次的类关系时会有用到,特别是非默认构造。

参考:1. Backbone.js for Absolute Beginners - Getting Started (Part 1: Intro)
        2. What is a view?
        3. 前端MVC框架Backbone 1.1.0源码分析(一)
        4. 前端MVC框架Backbone 1.1.0源码分析(二)

本文转载自:http://unmi.cc/backbone-get-started/

heroShane
粉丝 118
博文 229
码字总数 9508
作品 0
广州
私信 提问
Backbone.js 的技巧和模式

自从3年前Backbone.js发布第一版以来,Backbone.js就成为一个流行的开源JavaScript “MV*”框架,并获得人们的青睐。尽管Backbone.js给JavaScript应用提供了框架,但是它仍然给开发者留有很多...

yale8848
2013/09/14
11.8K
8
Spring Boot CLI安装及使用。

Spring Boot CLI是一种快速开发Spring应用的命令行界面。CLI就是Command Line Interface的简写,CLI利用了Spring Boot的起步依赖和自动配置,可以让人们专注于代码本身,而不用完成繁琐的配置...

Leafage_M
2017/10/23
0
0
Backbone.js 样例站点与入门指南

本文的来源 前段时间,我的工作中开始接触到 Backbone.js 这个开源框架,于是我就在网上搜索了下相关资料开始学习,结果找来找去,发现这些资料都不够全面,都是只涉及到关键点的一部分,只有...

苗哥
2012/08/06
8.2K
3
利用 BackboneJS 更好的组织 jQuery 应用的架构

在构建高交互度的Web应用程序方面,JavaScript发挥出越来越重要的作用。如Backbone.js,Marionette.js,Ember.js 和Angular.js 这些库和框架,在流行度和功能方面快速成长。对于建立复杂和强...

blackshow
2013/10/30
16.7K
15
Backbone.js 1.2.3 发布,JavaScript 的 MVC 框架

Backbone.js 1.2.3 发布,此版本修复了 1.2.2 版本的回退问题,当在一个超出边界的索引添加一个 model 到 collection 时会发生错误。 下载: http://backbonejs.org/backbone.js http://bac...

oschina
2015/09/07
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Replugin借助“UI进程”来快速释放Dex

public static boolean preload(PluginInfo pi) { if (pi == null) { return false; } // 借助“UI进程”来快速释放Dex(见PluginFastInstallProviderProxy的说明) return PluginFastInsta......

Gemini-Lin
今天
4
0
Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
今天
4
0
CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
今天
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
7
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部