无法获取骨干事件火;渲染模​​型多个位置 [英] Can't get backbone events to fire; render models to more than one location

问题描述

我似乎无法获得事件激发。

I can't seem to get events to fire.

下面是多和单观点：

单：

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或删除事件，虽然火。我怀疑其最密切相关的<一个href=\"http://stackoverflow.com/questions/11212287/backbone-view-event-not-firing-not-sure-why?rq=1\">events迷路的模板和<一个href=\"http://stackoverflow.com/questions/10037303/backbone-events-not-firing-general-feedback-on-use-of-the-framework\">this类似之一，但实际上我一直在努力，现在弄明白了几个小时。任何指导，将AP preciated！

I get no console errors and everything renders just fine. I just can't get the sayhi or delete events to fire though. I suspect its most closely related to events getting lost in templating and this similar one, but really I've been trying to figure it out for hours now. Any guidance would be appreciated!!

编辑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：

在小提琴的最后一个工作版本！

A final working version in a fiddle!!

最终版本小提琴

推荐答案

我是可疑 #recipients 引用。视图的事件属性仅代表们认为是视图的报里面的项目，我没有看到 #recipients 在任何你的意见的任何地方。如果 #recipients 超出这两个观点，就不会触发。

I'm suspicious of the #recipients reference. A View's events property only delegates to items that are inside the view's el, and I'm not seeing #recipients anywhere in any of your views. If #recipients is outside both of these views, it won't fire.

的根据意见修改的

您不应该做这样的事情：

You shouldn't be doing this sort of thing:

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

因为你可能修改视图的 $ EL 之外的元素。相反，这样做：

because you're probably modifying elements outside the view's $el. Instead, do this:

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

你希望绑定到应包含该视图的 $ EL 内的所有元素。如果他们没有，他们将无法正常进行绑定。这可能是所有绑定的根本原因，而不仅仅是 #recipients 。

All elements you wish to bind to should be contained inside the view's $el. If they're not, they won't bind properly. That's probably the root cause of all your bindings, not just the #recipients.

这篇关于无法获取骨干事件火;渲染模​​型多个位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！