Javascript 模式显示中的Backbone.js单击事件_Javascript_Html_Backbone.js_Zurb Foundation

Javascript 模式显示中的Backbone.js单击事件

javascript html backbone.js zurb-foundation

Javascript 模式显示中的Backbone.js单击事件,javascript,html,backbone.js,zurb-foundation,Javascript,Html,Backbone.js,Zurb Foundation,我在模板中得到了一个模态显示（），在这个模态中，我得到了一个带有按钮的表单，我想在视图中听到这个按钮，但是当我单击它时，它不会触发任何东西。这是我的密码： index.html： <body> <div class="page"> <div id="content"></div> </div> </body> <div id="myModal" class="reveal-modal

我在模板中得到了一个模态显示（），在这个模态中，我得到了一个带有按钮的表单，我想在视图中听到这个按钮，但是当我单击它时，它不会触发任何东西。这是我的密码：

index.html：

<body>
    <div class="page">
        <div id="content"></div>
    </div>
</body>

<div id="myModal" class="reveal-modal small" data-reveal>
    <label>Name :</label> 
    <input type="text" id="inNameGroup"></input> 
    <label > Description :</label> 
    <textarea id="inDescriptionGroup"></textarea>
    <button class="button right" id="btnAddGroup">Add group</button>
    <a class="close-reveal-modal">&#215;</a>
</div>
<div class="row">
    <button class="button tiny right" data-reveal-id="myModal" data-reveal>Add</button>
</div>

el: "#content",
initialize: function(){},
render:function(){
    this.template = _.template(tpl.get('tplGroup'));
    this.$el.html(this.template(this.model.attributes));
    this.$el.i18n();
    return this;
},
events:{
    "click #btnAddGroup": "addGroup"
},
addGroup: function(){
    ...
}

我认为问题在于视图在el中找不到按钮。

主干视图中的事件使用事件委派工作，也就是说，当您指定一个事件时，主干将这些事件绑定到根

el

。在这种情况下，您的问题是模式弹出窗口实际上不是根

el

的后代（插件将其附加到

DOM

中的其他位置，您可以在firebug/web inspector中检查该元素以自己查看）

例如，您可以自己手动绑定事件

render:function(){
    this.template = _.template(tpl.get('tplGroup'));
    this.$el.html(this.template(this.model.attributes));
    this.$el.i18n();
    $('#btnAddGroup').on('click', this.addGroup);
    return this;
},

尽管已经有了正确的答案，但我想补充一点，如果从主干视图中打开模态，它将返回对新元素的引用

var modalElement = this.$('#myModal').foundation('reveal', 'open');

可以使用

setElement（）

方法将元素的引用应用于视图，该方法将创建缓存的

$el

引用，并将视图的委派事件从旧元素移动到新元素

tplGroups.html：

<div id="myModal" class="reveal-modal small" data-reveal>
    <label>Name :</label> 
    <input type="text" id="inNameGroup"></input> 
    <label > Description :</label> 
    <textarea id="inDescriptionGroup"></textarea>
    <button class="button right" id="btnAddGroup">Add group</button>
    <a class="close-reveal-modal">&#215;</a>
</div>
<div class="row">
    <button class="button tiny right" id="btnOpenModal">Add</button>
</div>

这是一种更清洁的解决方案。非常感谢。你有没有更新基金会6？这似乎不再管用了。

el: "#content",
initialize: function(){},
render:function(){
    this.template = _.template(tpl.get('tplGroup'));
    this.$el.html(this.template(this.model.attributes));
    this.$el.i18n();
    return this;
},
events:{
    "click #btnOpenModal": "openModal",
    "click #btnAddGroup": "addGroup"
},
openModal: function(){
    this.setElement(this.$('#myModal').foundation('reveal', 'open'));
},
addGroup: function(){
    ...
}