這篇文章記錄關於 Backbone delegateEvents(), 也許會用到。
假設我們有一段已知的 HTML template:
/* main.html */
<script type="text/template" id="test-tmpl">
<div>
<button type="button">Click!</button>
</div>
</script>
而我們會針對它製作 Backbone View 並且在其中指定 event handling:
/* ClickBtn.js */
var ClickBtn = Backbone.View.extend({
el: $("test-tmpl"),
render: function(){
$("body").append(this.el));
},
events: {
'click button': 'clickAlert'
},
clickAlert: function(){
alert("Hello world!");
}
});
el: 將HTML template目標選取起來
render: 將HTML template append 到 body
events: 指定event type, 目標(即button) 和 event handling function(即clickAlert)
以上即完成一個基本的 View 和其中所綁定的 event。 實際使用看看:
/* main.html */
<script type="text/template" id="test-tmpl">
<div>
<button type="button">Click!</button>
</div>
</script>
<script src="ClickBtn.js"></script>
<script type="text/javascript">
var clickBtn = new ClickBtn();
clickBtn.render();
</script>
以上可以很順利的實作出來, 這段實作如果每次需要 new 一個 ClickBtn, 它都會固定去選取 id="test-tmpl" 這個 HTML template來呈現。試想另一種需求: 如果我們想指定特定的 HTML template 給 ClickBtn 去呈現 UI 呢? 很直覺會這樣做:
/* main.html */
<script type="text/template" id="test-tmpl">
<div>
<button type="button">Click!</button>
</div>
</script>
<script src="ClickBtn.js"></script>
<script type="text/javascript">
var clickBtn = new ClickBtn({selector: "#test-tmpl"});
clickBtn.render();
</script>
在 new ClickBtn 時, 多傳一個 selector 來指定 HTML template 的位置, 而 ClickBtn.js 要修改成:
/* ClickBtn.js */
var ClickBtn = Backbone.View.extend({
//el: $("test-tmpl"),
initialize: function(attrs){
this.el = $(attrs.selector);
},
render: function(){
$("body").append(this.el));
},
events: {
'click button': 'clickAlert'
},
clickAlert: function(){
alert("Hello world!");
}
});
el 這時候只能在initialize裡被指定, 可是這會發生一個問題, 如果你去點 button, 它並不會如預期的跳出 alert 視窗, 也就是 event 並沒有被 binding 到 DOM 上面。原因是 el 並沒有在 new ClickBtn 的時候第一時間產生, 解決方法是必須在initialize中再次呼叫Backbone 內建的 method: delegateEvents(), 作用是再 binding 一次:
/* ClickBtn.js */
var ClickBtn = Backbone.View.extend({
//el: $("test-tmpl"),
initialize: function(attrs){
this.el = $(attrs.selector);
this.delegateEvents();
},
render: function(){
$("body").append(this.el));
},
events: {
'click button': 'clickAlert'
},
clickAlert: function(){
alert("Hello world!");
}
});
(2012/12/16 update) 在Backbone 0.9版中,因為 delegateEvents() 的實做有改變,所以要將 this.el 改寫成 this.$el,如下
/* ClickBtn.js */
var ClickBtn = Backbone.View.extend({
//el: $("test-tmpl"),
initialize: function(attrs){
this.$el = $(attrs.selector); // for Backbone.js 0.9+
this.delegateEvents();
},
render: function(){
$("body").append(this.$el));
},
events: {
'click button': 'clickAlert'
},
clickAlert: function(){
alert("Hello world!");
}
});
假設我們有一段已知的 HTML template:
/* main.html */
<script type="text/template" id="test-tmpl">
<div>
<button type="button">Click!</button>
</div>
</script>
而我們會針對它製作 Backbone View 並且在其中指定 event handling:
/* ClickBtn.js */
var ClickBtn = Backbone.View.extend({
el: $("test-tmpl"),
render: function(){
$("body").append(this.el));
},
events: {
'click button': 'clickAlert'
},
clickAlert: function(){
alert("Hello world!");
}
});
el: 將HTML template目標選取起來
render: 將HTML template append 到 body
events: 指定event type, 目標(即button) 和 event handling function(即clickAlert)
以上即完成一個基本的 View 和其中所綁定的 event。 實際使用看看:
/* main.html */
<script type="text/template" id="test-tmpl">
<div>
<button type="button">Click!</button>
</div>
</script>
<script src="ClickBtn.js"></script>
<script type="text/javascript">
var clickBtn = new ClickBtn();
clickBtn.render();
</script>
以上可以很順利的實作出來, 這段實作如果每次需要 new 一個 ClickBtn, 它都會固定去選取 id="test-tmpl" 這個 HTML template來呈現。試想另一種需求: 如果我們想指定特定的 HTML template 給 ClickBtn 去呈現 UI 呢? 很直覺會這樣做:
/* main.html */
<script type="text/template" id="test-tmpl">
<div>
<button type="button">Click!</button>
</div>
</script>
<script src="ClickBtn.js"></script>
<script type="text/javascript">
var clickBtn = new ClickBtn({selector: "#test-tmpl"});
clickBtn.render();
</script>
在 new ClickBtn 時, 多傳一個 selector 來指定 HTML template 的位置, 而 ClickBtn.js 要修改成:
/* ClickBtn.js */
var ClickBtn = Backbone.View.extend({
//el: $("test-tmpl"),
initialize: function(attrs){
this.el = $(attrs.selector);
},
render: function(){
$("body").append(this.el));
},
events: {
'click button': 'clickAlert'
},
clickAlert: function(){
alert("Hello world!");
}
});
el 這時候只能在initialize裡被指定, 可是這會發生一個問題, 如果你去點 button, 它並不會如預期的跳出 alert 視窗, 也就是 event 並沒有被 binding 到 DOM 上面。原因是 el 並沒有在 new ClickBtn 的時候第一時間產生, 解決方法是必須在initialize中再次呼叫Backbone 內建的 method: delegateEvents(), 作用是再 binding 一次:
/* ClickBtn.js */
var ClickBtn = Backbone.View.extend({
//el: $("test-tmpl"),
initialize: function(attrs){
this.el = $(attrs.selector);
this.delegateEvents();
},
render: function(){
$("body").append(this.el));
},
events: {
'click button': 'clickAlert'
},
clickAlert: function(){
alert("Hello world!");
}
});
(2012/12/16 update) 在Backbone 0.9版中,因為 delegateEvents() 的實做有改變,所以要將 this.el 改寫成 this.$el,如下
/* ClickBtn.js */
var ClickBtn = Backbone.View.extend({
//el: $("test-tmpl"),
initialize: function(attrs){
this.$el = $(attrs.selector); // for Backbone.js 0.9+
this.delegateEvents();
},
render: function(){
$("body").append(this.$el));
},
events: {
'click button': 'clickAlert'
},
clickAlert: function(){
alert("Hello world!");
}
});