Backbone.js在Modal Reveal中點擊事件

我在模板中獲得了Modal Reveal（http://foundation.zurb.com/docs/components/reveal.html），在這種模式下，我得到了一個帶有按鈕的窗體，我想在視圖中聽這個按鈕，但是當我點擊它時不發射任何東西。這裏是我的代碼：Backbone.js在Modal Reveal中點擊事件

的index.html：

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

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" data-reveal-id="myModal" data-reveal>Add</button> 
</div>

group.js：

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中找到按鈕。

來源

2014-02-26 user3214296

事件在骨幹視圖中使用事件委託來工作，即當您指定事件哈希主幹將這些事件綁定到根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; 
},

來源

2014-02-26 15:05:56 Jack

即使有已是一個正確的答案，我想補充一點，如果你從骨幹中打開模式查看返回對新元素的引用。

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>

group.js：

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(){ 
    ... 
}

來源

2014-09-19 17:38:46 Jeromche

這是一個清潔的解決方案。謝謝！ – codebreaker

基金會6有任何更新嗎？這似乎不再有效。 – user1801879

Backbone.js在Modal Reveal中點擊事件

回答

相關問題