Backbone.js框架中簡單的View視圖編寫學(xué)習(xí)筆記
更新時(shí)間：2016年02月14日 16:14:28 作者：techfellow
這篇文章主要介紹了Backbone.js框架中簡單的View編寫學(xué)習(xí)筆記,Backbone是JavaScript的一款高人氣MVC框架,需要的朋友可以參考下
傳統(tǒng)上用jQuery操作DOM，就類似C語言中的goto語句，隨著項(xiàng)目復(fù)雜度增大，會越來越難以維護(hù)。
關(guān)于MVC（以及后續(xù)的MVP，MVVM），網(wǎng)上資源很多，就不展開。我們直接用代碼來操練。
index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Backbone</title> </head> <body> <div class="wrapper"></div> <script src="js/lib/jquery.min.js"></script> <script src="js/lib/underscore-min.js"></script> <script src="js/lib/backbone-min.js"></script> <script src="build/x.js"></script> </body> </html>
其中，x.js是用duo生成后的js。文件中引用的幾個(gè)js，都可以從百度靜態(tài)資源庫中下載到
1.js
var ListView = Backbone.View.extend({
//el: $('.wrapper'),
// 初始化函數(shù)，new時(shí)，backbone會自動(dòng)調(diào)用
initialize: function() {
this.render();
},
// 真正把修改操作同步到瀏覽器中
render: function() {
this.$el.append("<ul><li>Hello techfellow!</li></ul>");
}
});
var listView = new ListView({el: $('.wrapper')});
執(zhí)行：
$duo 1.js
知識點(diǎn)說明
- el：表示該View所代表的DOM元素，在render函數(shù)中，會同步到DOM操作中去。
- initialze：調(diào)用new時(shí)，會觸發(fā)的函數(shù)調(diào)用，類似構(gòu)造函數(shù)。
- render：觸發(fā)DOM操作，瀏覽器會渲染
- 最后一句，說明在new時(shí)，可以傳遞參數(shù)
疑惑
如果寫成 new ListView({el: '.wrapper'})也是可以的。
但考慮到el本身的含義，還是加上$更清晰些。
- $el和$()
- $(this.el) 等價(jià)于 this.$el
- $(this.el).find('.wrapper') 等價(jià)于 this.$('.wrapper')
setElement
如果想修改el內(nèi)容，包括值和綁定事件，可以使用setElement。下面這個(gè)例子中，setElement不僅僅把el的引用從button1改為button2，連click事件也同步修改過去了。
// We create two DOM elements representing buttons
// which could easily be containers or something else
var button1 = $('<button></button>');
var button2 = $('<button></button>');
// Define a new view
var View = Backbone.View.extend({
events: {
click: function(e) {
console.log(view.el === e.target);
}
}
});
// Create a new instance of the view, applying it
// to button1
var view = new View({el: button1});
// Apply the view to button2 using setElement
view.setElement(button2);
button1.trigger('click');
button2.trigger('click'); // returns true
事件處理和模板解析都是前端渲染必需的工作，backbone一般把這些內(nèi)容放到View里面統(tǒng)一處理。
2.js
var ListView = Backbone.View.extend({
el: $('.wrapper'),
events: {
'click button#add': 'addItem'
},
// 初始化函數(shù)，new時(shí)，backbone會自動(dòng)調(diào)用
initialize: function() {
// 用于計(jì)數(shù)
this.counter = 0;
this.render();
},
// 真正把修改操作同步到瀏覽器中
render: function() {
this.$el.append("<button id='add'>點(diǎn)擊添加</button><ul></ul>");
},
// event handler
addItem: function() {
this.counter++;
this.$('ul').append("<li>Hello techfellow, " + this.counter + " time(s)");
}
});
var listView = new ListView();
執(zhí)行：
$duo 2.js
知識點(diǎn)
- this.counter：內(nèi)部使用的數(shù)據(jù)，可以initialize中初始化
- events：聲明格式，'event selector': 'func'，這比之前$('.wrapper button#add').on('click', function(){...}); 的方式要清晰許多了。
模板
在index.html中加入：
<script type="text/template" id="tplItem"> <li>Hello techfellow, <%= counter %> time(s)</li> </script> <!--要放在2.js前面，否則在執(zhí)行時(shí)，可能遇到找不到tplItem的情況--> <script src="build/2.js"></script>
在View的聲明中修改：
events: {
'click button#add': 'addItem'
},
template: _.template($('#tplItem').html()),
修改addItem：
addItem: function() {
this.counter++;
this.$('ul').append(this.template({counter: this.counter}));
}
同理，這里的模板可以替換為任何第三方模板引擎。
比如：artTemplate
var template = require('./lib/template.js');
...
this.$('ul').append(template('tplItem', {counter: this.counter}));
...
相關(guān)文章
全面解析JavaScript的Backbone.js框架中的Router路由
這篇文章主要介紹了Backbone.js框架中的Router路由功能,Router在Backbone中相當(dāng)于一個(gè)MVC框架中的Controller控制器功能,需要的朋友可以參考下2016-05-05
Backbone.js框架中Model與Collection的使用實(shí)例
這篇文章主要介紹了Backbone.js框架中Model與Collection的使用實(shí)例,Collection是Model的一個(gè)有序的集合,需要的朋友可以參考下2016-05-05
Backbone.js為復(fù)雜WEB應(yīng)用程序提供模型(models)、集合(collections)、視圖(views)的結(jié)構(gòu)。其中模型用于綁定鍵值數(shù)據(jù)和自定義事件；集合附有可枚舉函數(shù)的豐富API； 視圖可以聲明事件處理函數(shù)，并通過RESRful JSON接口連接到應(yīng)用程序。2015-06-06
Backbone簡單、靈活，無論是富JS應(yīng)用還是企業(yè)網(wǎng)站都用得上，相比React針對View和單向數(shù)據(jù)流的設(shè)計(jì)，Backbone更能體現(xiàn)MVC的思路，所以針對它寫一篇入門范例,需要的朋友可以參考下2017-10-10
JavaScript的Backbone.js框架入門學(xué)習(xí)指引
這篇文章主要介紹了JavaScript的Backbone.js框架入門學(xué)習(xí)指引, 其中特別講到了Backbone中的關(guān)鍵部分Router路由器,需要的朋友可以參考下2016-05-05
Backbone View 之間通信有三種，分別是通過父視圖傳遞事件，通過 EventBus 在視圖間通信，直接用 Backbone 作為事件注冊機(jī)，本文對這三種通信方式逐一詳細(xì)介紹，感興趣的朋友一起學(xué)習(xí)2016-08-08
深入解析Backbone.js框架的依賴庫Underscore.js的作用
這篇文章主要介紹了深入解析Backbone.js框架的依賴庫Underscore.js的作用,用過Node.js的朋友對Underscore一定不會陌生:)需要的朋友可以參考下2016-05-05
深入解析JavaScript框架Backbone.js中的事件機(jī)制
這篇文章主要介紹了JavaScript框架Backbone.js中的事件機(jī)制,其中涉及到Backbone的MVC結(jié)構(gòu)及內(nèi)存使用方面的很多知識,需要的朋友可以參考下2016-02-02
JavaScript的Backbone.js框架環(huán)境搭建及Hellow world示例
這篇文章主要介紹了JavaScript的Backbone.js框架環(huán)境搭建及Hellow world示例,Backbone是一個(gè)類似MVC結(jié)構(gòu)的前端MVVM框架,非常輕量,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了Backbone.js的一些使用技巧,Backbone.js是一款人氣JavaScript庫,需要的朋友可以參考下2015-07-07