Backbone View События не стреляют

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 для своего вида. Магистраль присваивает событиям делегата div по умолчанию, если ни одно из указанных выше не объявлено. В вашей функции инициализации вы затем устанавливаете el явно, переопределяя el с прикрепленными обработчиками событий. Попробуйте установить свой раздел как tagName и удалить его из свойства элемента. Затем добавьте свои элементы в this.el. Извините, что не представил пример кода, но я пишу на своем телефоне.

Answer 2

без надлежащего кода я могу только догадываться, , но эта ошибка обычно возникает из-за того, что код вашего представления объявлен до того, как dom готов.

Вы могли бы показать нам, где вы запускаете свое приложение?

Он находится в состоянии готовности к работе в jquery?

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