Backbone View入门

最新推荐文章于 2024-05-23 14:45:07 发布

weixin_34306446

最新推荐文章于 2024-05-23 14:45:07 发布

阅读量103

点赞数

文章标签： java javascript 测试 ViewUI

原文链接：https://yq.aliyun.com/articles/44231

版权

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

     Java代码   
     
   
<!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 属性，就写成

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

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

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

     Java代码   
     
this.constructor.__super__.initialize.apply(this);

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

weixin_34306446

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Backbone View入门

Backbone 是一个JavaScript框架，可用于创建模型-视图-控制器 (model-view-controller, MVC) 类应用程序和单页界面。它试图让 JavaScript 应用程序更清晰结构化，所涉及到的概念有 View,Event,Model,Collection 和Router，所以新手刚开始接触 Backbone ...
复制链接

扫一扫