骨幹視圖事件不是解決方案

Question

我有一個模式對話框類，我正在使用某些按鈕來顯示錶單。這裏是ModalView觀點：

App.ModalView = Backbone.View.extend({ 
    events: { 
     "click .dismiss": "dismiss" 
    }, 
    element: "<section class='modal'><div class='overlay'></div><div class='content'></div></section>", 

    initialize: function() { 
     this.el = $(this.element); 

     this.setupElement(); 
     this.bindContext(); 
     this.extendEvents(); 
     this.render(); 
     this.miscellaneous(); 
    }, 

    bindContext: function() { 
     _.bindAll(this, "dismiss", "render", "setBoxStyle"); 
    }, 

    setupElement: function() { 
     this.template = $("#modal-template"); 
    }, 

    miscellaneous: function() {}, 
    extendEvents: function() {}, 

    render: function() { 
     $(this.el).find(".content").html(this.template.html()); 
     $("body").append(this.el); 

     this.setBoxStyle(); 

     if (this.options.content) { 
      $(this.el).find(".content").html(this.options.content); 
     } 
    }, 

    getMargin: function (width, height) { 
     var top, left; 

     width = parseFloat(width); 
     height = parseFloat(height); 

     top = Math.max(0, Math.round((window.innerHeight - height)/2)); 
     left = Math.max(0, Math.round((window.innerWidth - width)/2)); 

     return top + "px " + left + "px"; 
    }, 

    setBoxStyle: function() { 
     var css = this.options.css || {}; 

     var el = $(this.el).find(".content"); 

     el.css(css); 

     var width = el.outerWidth(); 
     var height = el.outerHeight(); 
     css.margin = this.getMargin(width, height); 

     el.css(css); 
    }, 

    dismiss: function() { 
     this.remove(); 
    } 
}); 

這裏是擴展視圖：

App.AddRecordView = App.ModalView.extend({ 
    setupElement: function() { 
     this.template = $("#add-record-template"); 
    } 
}); 

這裏是模板：

<script type="text/template" id="add-record-template"> 
    <h1>Add Record</h1> 

    <button class="green save">Save Record</button> 
    <button class="cancel dismiss">Cancel</button> 

</script> 

這裏是我初始化視圖：

this.addRecordView = new App.views.addRecord({ 
    model: this.model, 
    css: { 
     width: "400px" 
    } 
}); 

由於某些原因解僱事件當我點擊按鈕時不會觸發。這裏發生了什麼？

Answer 1

您還沒有爲您的視圖定義el或tagName。如果沒有聲明上述內容，Backbone會將委託事件分配給一個div。在你的初始化函數中，你明確地設置el，用附加的事件處理函數覆蓋el。嘗試將您的部分設置爲tagName，並將其從元素屬性中移除。然後將你的元素附加到this.el. 對不起，沒有提供代碼示例，但我正在寫我的手機。

Answer 2

沒有正確的代碼我只能猜測， 但這種錯誤通常是因爲你的視圖的代碼是在dom準備好之前聲明的。

你能告訴我們你的應用程序啓動的地方嗎？

它是否在jQuery文檔準備好功能？

$(function(){ 
    this.addRecordView = new App.views.addRecord({ 
     model: this.model, 
     css: { 
      width: "400px" 
     } 
    }); 
});