A View обычно ожидает объект с этими атрибутами до его рендеринга:
{ el: '#someelement', model: someModel }
A View также позволяет привязывать события модели к функциям в представлении:
initialize: function() {
this.model.bind('change', this.renderFromModel, this);
},
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
},
renderFromModel: function() {
var t = _.template($('#some-template').html());
$('item-' + this.cid).html(t(this.toJSON()));
return this;
},
Проблема в том, что в первый раз, когда мы создаем представление для рендеринга, он ожидает объект с моделью в нем; и во второй раз мы визуализируем представление, когда оно вызывается из Модели, это не так. Из-за этого я создаю две функции render().
Есть ли лучший способ достижения рендеринга отдельных элементов, который также может реагировать на события model.change()?
Я думаю, вам нужно обеспечить, чтобы ваш метод render всегда привязывал представление, вызывая метод bindSll underscore.js.
SomeView = Backbone.View.extend({
initialize: function(){
_.bindAll(this, "render");
this.model.bind('change', this.render);
},
render: function(){
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
Лучшим решением является использование функции listenTo:
SomeView = Backbone.View.extend({
initialize: function(){
this.listenTo(this.model, 'change', this.render);
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
Таким образом, объект представления знает о его привязках, и все они могут быть удалены с помощью функции stopListening и не нужно вызывать bind или bindAll явно. И последнее, но не менее важное: мой код чище.
Использовать метод _.bind() для установки области
this.model.bind('change', _.bind(this.render, this));
В соответствии с базой 0.9.2 (и, возможно, ранее) функция on() или bind() (а также ее аналог off() или unbind()) принимает необязательный параметр context для использования для this при вызове.
Итак,
SomeView = Backbone.View.extend({
initialize: function(){
_.bindAll(this, "render");
this.model.bind('change', this.render);
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
может стать
SomeView = Backbone.View.extend({
initialize: function(){
this.model.bind('change', this.render, this);
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
Смотрите документацию для on().
создать экземпляр модели в представлении
var myapp.myView = new View({
model: new Model
});
и когда вы инициализируете Backbone.View внутри, добавьте это.. какой рендер будет вызываться в любое время, когда есть изменение, это атрибуты модели из него по умолчанию
this.model.bind('change', this.render,this)