Backbone.js: привязка к кнопке шаблона

Question

Я создаю приложение с Backbone.js, где отображается список элементов и «новый» элемент-заполнитель. Контейнер представляет собой представление, которое содержит все под-представления и отображает их.

Я искал какое-то время, но не могу заставить его работать. Проблема в том, что кнопка «Добавить» в шаблоне не запускает событие. Я думаю, это из-за того, что рендеринг происходит в более поздний момент времени, и поэтому событие не назначено. Читая другие сообщения, об этом следует заботиться Backbone.js, но это не так. Добавление обработчика события jQuery после render() выполняет эту работу, но я думаю, что это не может быть решением.

Вот соответствующий код зрения:

template: _.template($("#template-time-new").html()), 
events: { 
    'click #btn-new-time': 'onButtonNewClick' 
}, 
render: function() { 
    this.$el.html(this.template()); 

    return this; 
}, 

onButtonNewClick: function() { 
    return false; // in this case: prevent page reload 
} 

Мой шаблон (нефрит):

script(type="text/template", id="template-time-new"). 
<h3> 
    <label for="new-time-name" class="muted">Name:</label> 
    <input id="new-time-name" type="text"> 
</h3> 
<div class="time-inner"> 
    <form class="form-horizontal"> 
    <label for="new-time-start" class="muted">From:</label> 
    <input id="new-time-start" type="datetime-local"> 

    <label for="new-time-end" class="muted">to</label> 
    <input id="new-time-end" type="datetime-local"> 

    <button class="btn" id="btn-new-time"> 
     Add 
    </button> 
    </form> 
</div> 

EDIT:

Вот код из родительского вида:

initialize: function() { 
    this.newView = new TimeSpanNewView; // <---- the view that is not really working 

    this.render(); 

    // bind event handlers 
    this.collection.on('all', this.render, this); 
    // fetch data 
    this.collection.fetch(); 
}, 

render: function() { 
    var self = this; 

    self.$el.empty(); 

    if (self.collection.length > 0) { 
    self.collection.each(function(timespan) { 
     var subView = new TimeSpanView({ // sub views for the items, everything fine here 
     model: timespan 
     }); 

     subView.render() 
     self.$el.append(subView.el); 
    }); 
    } else { 
    self.$el.text("Nothing found."); 
    } 

    self.$el.append(self.newView.render().el); 

    return self; 
} 

Answer 1

Удалено предыдущий комментарий. Ну, вы должны отображать его каждый раз в render() родительского представления. Но вместо того, чтобы делать self.$el.html("");, попробуйте self.$el.children().detach(). И добавить вид ребенка, как

self.$el.append(self.newView.render().el); 

Объяснение: $ эш уже содержит ваш взгляд ребенка, и вы не хотите, чтобы полностью удалить точку зрения ребенка. Поэтому вам нужно вызвать detach() на этом - он удаляет объект DOM для дочернего представления со страницы, но не полностью удаляет его.