backbone 的delegateEvent用法

這篇文章記錄關於 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!");
  }
});