События backbone.js на шаблонах

Question

Я пытаюсь назначить событие кнопке с использованием магистральных событий:. Я попробовал, как все это сделали, но ничего не сработало. Мое подозрение в том, что я не могу добавлять события, потому что содержимое $ el еще не обновлено (я загружаю шаблон, используя знак подчеркивания). Итак, мой вопрос заключается в том, как я могу назначить события классам, которые arent загружен в начале?

Мой код на Github в репо https://github.com/PITS/bluLime-CMS

файл я работаю находится под Ui/скриптов/просмотров/UserPage.js.

var UserView = Backbone.View.extend({ 
    initialize: function() {}, 
    render: function() { 

     var data = { 
     }; 
     var compiled = _.template(UserPage, data); 

     $.when($('.main').html(compiled)).then(function() { 
      this.$el = $(".userEdit"); 
      console.log(this.$el); 
     }); 
    }, 
events: { 
    "click .header button": "openPreview" 
}, 
openPreview: function() { 
    alert("HI"); 
} 

Шаблон находится в UI/скрипты/просмотры/шаблоны/UserPage.js

<div class="userEdit"> 
<div class="header"> 
    <h2> 
     Edit Users 
    </h2> 
    <button> 

    </button> 
</div> 
</div> 

PS: Я уже судимый решить эту проблему, но я не смог

Answer 1

Ваши события Арен после того, как вы измените this.$el. Вместо прямого задания this.$el используйте View.setElement. Он будет заниматься реферированием событий для вас.

Кроме того, вам необходимо создать переменную view, чтобы сохранить ссылку на this, так как контекст внутри обратного вызова then больше не является видом.

рендеринге функция должна выглядеть следующим образом:

render: function() { 

    var data = { 
    }; 
    var compiled = _.template(UserPage, data); 
    var view = this; 

    $.when($('.main').html(compiled)).then(function() { 
     view.setElement($(".userEdit")); 
     console.log(view.$el); 
    }); 
}