0

我似乎无法触发事件。

这是多个视图和单个视图:

单身的:

PartyView =  Backbone.View.extend({
tagName: 'span',
className: 'aParty',
senderTemplate: _.template($('#senderTemplate').html()),
recipientTemplate: _.template($('#recipientTemplate').html()),
render: function () {
if (this.model.get("isSender")=="1")
    $("#senders").append(this.senderTemplate(this.model.toJSON()))
else
    $("#recipients").append(this.recipientTemplate(this.model.toJSON()))
},
events: {
    "click .delete":"deleteParty",
    'click #recipients': "sayhi"
},
sayhi : function () { console.log ("hi"); },
deleteParty:function () {
    this.model.destroy();
    this.remove();
}
})

多:

PartiesView = Backbone.View.extend({
className: "partiesView",
senderTemplate: _.template($('#senderTemplate').html()),
recipientTemplate: _.template($('#recipientTemplate').html()),
render: function(eventName) {
    $("#senders").empty();
    $("#recipients").empty();
  _.each(this.model.models, function(party){
      var partyview = new PartyView ({ model: party })
      partyview.render();
  }, this);

  return this;
},
events : {
'click #recipients': "sayhi"
},
sayhi : function () { console.log ("hi"); }
});

我没有收到控制台错误,一切都很好。我只是无法让 sayhi 或 delete 事件触发。我怀疑它与模板中丢失的事件这个类似的事件最密切相关,但实际上我已经试图弄清楚几个小时了。任何指导将不胜感激!!

编辑1:

这是模板:

<script type='text/template' id='senderTemplate'>
<span class='greenbubble'><%= email%>&nbsp;<button class='delete'>x</button></span>&nbsp;&nbsp;
</script>

<script type='text/template' id='recipientTemplate'>
<span class='lightbluebubble'><%= email%>&nbsp;<button class='delete'>x</button></span>&nbsp;&nbsp;
</script>

编辑2:

#senders并且#recipients目前在 HTML

<div id='partiesView'>
Senders:<span id='senders'></span><BR>
Recipients:<span id='recipients'></span>
</div>

编辑 3:

小提琴的最终工作版本!

小提琴的最终版本

4

1 回答 1

3

我对#recipients引用表示怀疑。视图的events属性仅代表视图内部的项目,el#recipients在您的任何视图中都看不到任何地方。如果#recipients在这两个视图之外,它不会触发。

根据评论修改

你不应该做这种事情:

$("#senders").append(this.senderTemplate(this.model.toJSON()))

因为您可能正在修改视图之外的元素$el。相反,请执行以下操作:

this.$("#senders").append(this.senderTemplate(this.model.toJSON()))

您希望绑定到的所有元素都应包含在视图的$el. 如果不是,它们将无法正确绑定。这可能是所有绑定的根本原因,而不仅仅是#recipients.

于 2013-09-08T17:24:05.160 回答