У меня есть простой сценарий с представлением, отвечающим за управление одной из областей моего приложения, называемой TransactionView. Одно из его подзонов называется TransactionEditorView.События, не срабатывающие в подвью
Проблема в том, что его события не стреляют!
Редактор транзакций отображается правильно (showAddEntryForm вызывается), но не может быть скрыт ('click .hide-add-entry' никогда не запускается).
Я буду размещать соответствующие части моего кода:
TransactionView.js
Backbone.View.extend({
className: 'transactionView',
initialize: function() {
// ...
this.editorView = new TransactionEditorView({
collection: this.collection,
parent: this
});
this.render();
},
render: function() {
this.$el.html(template()); // underscore template "transactions.html"
this.$el.find('.new-transaction').after(this.editorView.render().el);
return this;
},
events: {
'click .new-transaction button': 'showAddEntryForm'
},
showAddEntryForm: function(event) {
event.preventDefault();
$(event.currentTarget).addClass('selected');
this.editorView.show();
},
//...
}
transactions.html
<div class="controls-container">
<div class="new-transaction">
<button type="button" class="btn btn-lg btn-success add-positive-entry">
<span class="visible-xs-* hidden-sm hidden-md hidden-lg">+</span>
</button>
<button type="button" class="btn btn-lg btn-danger add-negative-entry">
<span class="visible-xs-* hidden-sm hidden-md hidden-lg">-</span>
</button>
<div class="clearfix"></div>
</div>
<div class="balance">balance</div>
<div class="filters">filters</div>
</div>
<div class="entry-list"></div>
TransactionEditor.js
Backbone.View.extend({
className: 'add-entry-form',
template: template,
initialize: function(options) {
this.collection = options.collection;
this.parent = options.parent;
},
render: function() {
console.log(this.el);
this.$el.html(this.template());
return this;
},
events: {
'click .add-entry' : 'addEntry',
'click .hide-add-entry' : 'hide'
},
hide: function(event) {
console.log("Hiding editor");
event.preventDefault();
this.$el.slideUp();
this.parent.$el.find('.new-transaction button').removeClass('selected');
},
show: function() {
this.$el.slideDown();
},
addEntry: function() {
}
// ...
}
transactionEditor.html
<form role="form">
form fields
</form>
Я подозреваю, что-то связанное с эль в подвид не работает хорошо, но не может получить, где она ... Пожалуйста, помогите мне ,
UPDATE
Очень странно! Путем простого перемещения кода создания редактора (this.editorView = new TransactionEditorView(...);)
из родительского инициализируйте метод методу рендеринга родителя ... Он работает! Теперь я действительно путают ...
Любой шанс увидеть урезанную (но функциональную) демо на jsfiddle.net или jsbin.com? –
Не жалко, теперь это будет непросто –
Вы говорите что-нибудь вроде 'parentView.el.html (...)' где-нибудь? Вы уничтожаете и воссоздаете представления по мере необходимости (хорошие) или пытаетесь повторно использовать представления, скрывая/показывая их (очень склонны к ошибкам)? –