Backbone視圖中的事件

我的backbone.js應用程序包含一系列項目。收集的意見和每個項目按預期呈現。Backbone視圖中的事件

每個項目都有兩個動作，讓我們說A和B.如何在ItemView類中連接事件監聽器，以便我可以處理動作A和B？

window.SourceListItemView = Backbone.View.extend({ 
tagName: "li", 

initialize: function() { 
    this.model.bind("change", this.render, this); 
    this.model.bind("destroy", this.close, this); 
}, 

render: function() { 
    $(this.el).html(this.template(this.model.toJSON())); 
    return this; 
}, 

events: { 
    "click .action_a": "doA", 
    "click .action_b": "doB" 
}, 

doA: function(event) { 
    alert("A clicked for " + JSON.stringify(event)); 
}, 


doB: function(event) { 
    alert("B clicked for " + JSON.stringify(event)); 
}

}）;

ItemView控件的模板

<a href="#sources/<%=id %>" class="source thumbnail plain" style="text-align: center;"> 
    <h4><%= name %></h4> 
    <button class="btn btn-primary action_a"> A</button> 
    <button class="btn btn-info action_b"> B</button> 
</a>

來源

2013-05-16 VNVN

試圖瞭解你的問題。 doA，doB不被解僱？是你的問題？ – Protostome

是的，這是問題 – VNVN

此行似乎是這個問題：

$(this.el).html(this.template(this.model.toJSON()));

我得到了它工作中使用此：

this.$el.html(test(this.model.toJSON()));

注意我改變了一些其他的東西，讓它在當地工作，可能會或可能不會她的問題。

該視圖需要指定模板。
<a>標籤包含按鈕。
只好改變JSON.Stringify（event）做功能。

工作代碼：

<html> 

     <script src="./jquery.js"></script> 
     <script src="./underscore.js"></script> 
     <script src="./backbone.js"></script> 

     <body> 
     </body> 

     <script> 
     window.SourceListItemView = Backbone.View.extend({ 
      tagName: "li", 

      initialize: function() { 
       this.model.bind("change", this.render, this); 
       this.model.bind("destroy", this.close, this); 
      }, 

      template: function(data) { 
      var compiled = _.template('<a href="#sources/<%=id %>" class="source thumbnail plain" style="text-align: center;"> <h4><%= name %></h4> </a> <button class="btn btn-primary action_a"> A</button> <button class="btn btn-info action_b"> B</button>'); 
      return compiled; 
      }, 

      render: function() { 
       var test = this.template(); 
       this.$el.html(test(this.model.toJSON())); 
       return this; 
      }, 

      events: { 
      "click .action_a": "doA", 
      "click .action_b": "doB" 
      }, 

      doA: function(event) { 
       alert("A clicked for " + JSON.stringify(event)); 
      }, 


      doB: function(event) { 
       alert("B clicked for " + $(event.srcElement).html()); 
      } 
     }); 

     testModel = new Backbone.Model({id: 1, name: 'Elias'}); 
     testRow = new SourceListItemView({model: testModel}); 
     $('body').append(testRow.render().$el); 
     </script> 
    </html>

來源

2013-05-16 17:28:05

感謝您的回覆！我認爲訣竅是包含按鈕的標籤。我刪除了，這一切工作。謝謝你的暗示 – VNVN

Backbone視圖中的事件

回答

相關問題