分類  >  Web前端 >

Backbone札記之一(View)

tags:    時間:2013-12-10 08:06:56
Backbone筆記之一(View)

關於Backbone是什麼,就不用我多介紹了,不知道的這貨是什麼的話請直接忽略本文吧。本文只是作為本人學習這貨的一個筆記,順大便給其他學習者參考一下。

View

首先從View部分開始,第一個程序註定是從hello world開始。

在開始之前,先創建一個HTML文件,在其中引用這三個JS庫(注意:underscore要在backbone前面):

jquery.js underscore.js backbone.js 

頁面的內容就隨意了,下面的例子要求頁面中包含一個<div id="body" />節點。

然後創建一個最簡單的View:

var TestView = Backbone.View.extend({  //  創建一個view,其實就是一個HTML的DOM節點     render: function() {  // 渲染方法         this.$el.html('Hello World');  //  this.el就是HTML節點,通過jQuery的html方法填充內容         return this;     } });  new TestView({el: $('#body')});  //  以目標節點(一個 <div id="body" />)為el參數,創建一個view的實例,render函數將會被自動調用並將渲染結果填充到el中

原理見註釋。

放到瀏覽器里看看效果吧。

事件響應

試一個簡單的效果:點擊隱藏。

把上面的View改成這樣:

    var TestView = Backbone.View.extend({         events: {             'click button#toggle' : 'toggle' //  響應toggle button的click事件         },         initialize: function() {             this.render();         },         render: function() {             this.$el.html('<p id="hello">Hello World</p><button id="toggle">Toggle</button>');  //  增加一個toggle button             return this;          },          toggle: function() {              $("#hello").toggle();  //  用jQuery的toggle方法切換顯示             return this;          }      });

刷新頁面,點擊按鈕試試。

模板

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

理論上可以在backbone里使用任何JavaScript模板,這裡以underscore自帶的template為例。

先按模板的語法在HTML文件里寫一個模板:

    <script type="text/template" id="hello-template">         <div>             <h3 id="hello">${message}</h3>             <button id="toggle">Toggle</button>         </div>     </script> 

為了不影響頁面的正常顯示,JS模板通常都是放在 text/template 類型的 script 標籤里。

注意,因為習慣的問題,模板里的變數標記沒有使用默認的<%= %>,而是改成和python mako里一樣的 ${ },為此需要修改underscore的模板設置如下:

_.templateSettings = {    interpolate : /\$\{(.+?)\}/g }; 

而顯示模板的方法如下:

var TestView = Backbone.View.extend({         template: null,  //  把模板直接放這裡有時也可以,但有時又會出錯,還不知道是什麼原因         events: {             'click button#toggle' : 'toggle'         },         initialize: function() {             this.template = _.template($("#hello-template").html());  //  模板放這裡一般沒問題             this.render();         },         render: function() {             this.$el.html(this.template({message: "hello world!"}));  //  渲染模板             return this;         },         toggle: function() {             this.$("#hello").toggle();             return this;         }     });

再刷新頁面看看。效果與上一個例子相同,但是單獨的HTML模板使代碼清晰很多,也便於修改。

(待續)

推薦閱讀文章

Bookmark the permalink ,來源:互聯網