Backbone.js HelloWorld，应用起步 | 隔叶黄莺 Yanbin Blog

2014-01-01 | 阅读(1,265)

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>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div id="container">Loading...</div>

</body>

</html>

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 属性，就写成