Backbone.js框架中簡(jiǎn)單的View視圖編寫學(xué)習(xí)筆記
更新時(shí)間：2016年02月14日 16:14:28 作者：techfellow
這篇文章主要介紹了Backbone.js框架中簡(jiǎn)單的View編寫學(xué)習(xí)筆記,Backbone是JavaScript的一款高人氣MVC框架,需要的朋友可以參考下
傳統(tǒng)上用jQuery操作DOM，就類似C語(yǔ)言中的goto語(yǔ)句，隨著項(xiàng)目復(fù)雜度增大，會(huì)越來(lái)越難以維護(hù)。
關(guān)于MVC（以及后續(xù)的MVP，MVVM），網(wǎng)上資源很多，就不展開。我們直接用代碼來(lái)操練。
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)資源庫(kù)中下載到
1.js
var ListView = Backbone.View.extend({
//el: $('.wrapper'),
// 初始化函數(shù)，new時(shí)，backbone會(huì)自動(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
知識(shí)點(diǎn)說(shuō)明
- el：表示該View所代表的DOM元素，在render函數(shù)中，會(huì)同步到DOM操作中去。
- initialze：調(diào)用new時(shí)，會(huì)觸發(fā)的函數(shù)調(diào)用，類似構(gòu)造函數(shù)。
- render：觸發(fā)DOM操作，瀏覽器會(huì)渲染
- 最后一句，說(shuō)明在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事件也同步修改過(guò)去了。
// 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會(huì)自動(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
知識(shí)點(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)文章
BackBone及其實(shí)例探究_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了BackBone及其實(shí)例探究,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
深入解析Backbone.js框架的依賴庫(kù)Underscore.js的作用
這篇文章主要介紹了深入解析Backbone.js框架的依賴庫(kù)Underscore.js的作用,用過(guò)Node.js的朋友對(duì)Underscore一定不會(huì)陌生:)需要的朋友可以參考下2016-05-05
backbone簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了backbone簡(jiǎn)介，詳細(xì)的介紹了backbone簡(jiǎn)介和用法，有興趣的可以了解一下2017-07-07
Backbone View 之間通信有三種，分別是通過(guò)父視圖傳遞事件，通過(guò) EventBus 在視圖間通信，直接用 Backbone 作為事件注冊(cè)機(jī)，本文對(duì)這三種通信方式逐一詳細(xì)介紹，感興趣的朋友一起學(xué)習(xí)2016-08-08
JavaScript的Backbone.js框架環(huán)境搭建及Hellow world示例
這篇文章主要介紹了JavaScript的Backbone.js框架環(huán)境搭建及Hellow world示例,Backbone是一個(gè)類似MVC結(jié)構(gòu)的前端MVVM框架,非常輕量,需要的朋友可以參考下2016-05-05
JavaScript的Backbone.js框架入門學(xué)習(xí)指引
這篇文章主要介紹了JavaScript的Backbone.js框架入門學(xué)習(xí)指引, 其中特別講到了Backbone中的關(guān)鍵部分Router路由器,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了Javascript MVC框架Backbone.js詳解,本文對(duì)Backbone.js的各個(gè)模塊和方法的使用上都給出了實(shí)際例子,需要的朋友可以參考下2014-09-09
Backbone.js框架中簡(jiǎn)單的View視圖編寫學(xué)習(xí)筆記
這篇文章主要介紹了Backbone.js框架中簡(jiǎn)單的View編寫學(xué)習(xí)筆記,Backbone是JavaScript的一款高人氣MVC框架,需要的朋友可以參考下2016-02-02
深入解析JavaScript框架Backbone.js中的事件機(jī)制
這篇文章主要介紹了JavaScript框架Backbone.js中的事件機(jī)制,其中涉及到Backbone的MVC結(jié)構(gòu)及內(nèi)存使用方面的很多知識(shí),需要的朋友可以參考下2016-02-02
實(shí)例講解JavaScript的Backbone.js框架中的View視圖
這篇文章主要介紹了實(shí)例講解JavaScript的Backbone.js框架中的View視圖,在瀏覽器端js框架backbone中我們用view來(lái)綁定和處理DOM事件,需要的朋友可以參考下2016-05-05