计划,每天学习两小时,坚持带来大改变。

Backbone笔记之一(View)

前端开发 阿尤 2146浏览 0评论

关于Backbone是什么,就不用我多介绍了,不知道的这货是什么的话请直接忽略本文吧。本文只是作为本人学习这货的一个笔记,顺大便给其他学习者参考一下。

View

首先从View部分开始,第一个程序注定是从hello world开始。

在开始之前,先创建一个HTML文件,在其中引用这三个JS库(注意:underscore要在backbone前面):

  1. jquery.js  
  2. underscore.js  
  3. backbone.js  

页面的内容就随意了,下面的例子要求页面中包含一个<div id="body" />节点。

然后创建一个最简单的View:

[jscript] view plaincopy
  1. var TestView = Backbone.View.extend({  //  创建一个view,其实就是一个HTML的DOM节点  
  2.     initialize: function() {    
  3.         this.render();    
  4.     },  
  5.     render: function() {  // 渲染方法  
  6.         this.$el.html('Hello World');  //  this.el就是HTML节点,通过jQuery的html方法填充内容  
  7.         return this;  
  8.     }  
  9. });  
  10.   
  11. $(function () {  
  12.     var v = new TestView({el: $('#body')});  //  以目标节点(一个 <div id="body" />)为el参数,创建一个view的实例,render函数将会被自动调用并将渲染结果填充到el中  
  13.     //v.render(); // 如果没在 initialize 里调用 render 的话,就需要在这里调用一次  
  14. });  

原理见注释。

放到浏览器里看看效果吧。

事件响应

试一个简单的效果:点击隐藏。

把上面的View改成这样:

[jscript] view plaincopy
  1. var TestView = Backbone.View.extend({  
  2.     events: {  
  3.         'click button#toggle' : 'toggle' //  响应toggle button的click事件  
  4.     },  
  5.     initialize: function() {  
  6.         this.render();  
  7.     },  
  8.     render: function() {  
  9.         this.$el.html('<p id="hello">Hello World</p><button id="toggle">Toggle</button>');  //  增加一个toggle button  
  10.         return this;   
  11.     },   
  12.     toggle: function() {   
  13.         $("#hello").toggle();  //  用jQuery的toggle方法切换显示  
  14.         return this;   
  15.     }   
  16. });  

刷新页面,点击按钮试试。

注意,如果 events 里用的是非唯一的绑定,可以通过以下方式取得发生事件的对象:

[jscript] view plaincopy
  1. // ...  
  2. 'click button.show''showItem'  
  3. // ...  
  4. showItem: function (e) {  
  5.   alert($(e.currentTarget));  
  6. }  

模板

代码里嵌入HTML是很麻烦的事情,所以模板是需要的。

理论上可以在backbone里使用任何JavaScript模板,这里以underscore自带的template为例。

先按模板的语法在HTML文件里写一个模板:

  1. <script type="text/template" id="hello-template">  
  2.     <div>  
  3.         <h3 id="hello">${message}</h3>  
  4.         <button id="toggle">Toggle</button>  
  5.     </div>  
  6. </script>  

为了不影响页面的正常显示,JS模板通常都是放在 text/template 类型的 script 标签里。

注意,因为习惯的问题,模板里的变量标记没有使用默认的<%= %>,而是改成和python mako里一样的 ${ },为此需要修改underscore的模板设置如下:

[jscript] view plaincopy
  1. _.templateSettings = {  
  2.    interpolate : /\$\{(.+?)\}/g  
  3. };  

而显示模板的方法如下:

[jscript] view plaincopy
  1. var TestView = Backbone.View.extend({  
  2.         template: null,  //  把模板直接放这里有时也可以,但有时又会出错,还不知道是什么原因  
  3.         events: {  
  4.             'click button#toggle' : 'toggle'  
  5.         },  
  6.         initialize: function() {  
  7.             this.template = _.template($("#hello-template").html());  //  模板放这里一般没问题  
  8.             this.render();  
  9.         },  
  10.         render: function() {  
  11.             this.$el.html(this.template({message: "hello world!"}));  //  渲染模板  
  12.             return this;  
  13.         },  
  14.         toggle: function() {  
  15.             this.$("#hello").toggle();  
  16.             return this;  
  17.         }  
  18.     });  

再刷新页面看看。效果与上一个例子相同,但是单独的HTML模板使代码清晰很多,也便于修改。

(待续)


转自 http://blog.csdn.net/raptor/article/details/8566017,感谢原作者的无偿提供,本人只做收藏之用,觉得不错就分享了。

转载请注明:阿尤博客 » Backbone笔记之一(View)

游客
发表我的评论 换个身份
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  • 验证码 (必填)点击刷新验证码