在 Backbone.js 中,可以通过监听父模型的变化事件,然后在事件处理程序中重新渲染父视图而不重新渲染子视图。
下面是一个示例代码:
// 父模型
var ParentModel = Backbone.Model.extend({
defaults: {
name: ''
}
});
// 父视图
var ParentView = Backbone.View.extend({
el: '#parent-container',
initialize: function() {
this.listenTo(this.model, 'change:name', this.render);
},
render: function() {
// 根据模型的变化重新渲染父视图
this.$el.html('' + this.model.get('name') + '
');
return this;
}
});
// 子视图
var ChildView = Backbone.View.extend({
el: '#child-container',
render: function() {
// 渲染子视图
this.$el.html('This is the child view
');
return this;
}
});
// 创建父模型实例
var parentModel = new ParentModel();
// 创建父视图实例
var parentView = new ParentView({ model: parentModel });
// 创建子视图实例
var childView = new ChildView();
// 渲染父视图
parentView.render();
// 渲染子视图
childView.render();
// 监听输入框的变化,更新父模型的属性值
$('#name-input').on('input', function() {
parentModel.set('name', $(this).val());
});
在上述代码中,当输入框的值发生变化时,父模型的 name
属性会被更新,并触发 change:name
事件。父视图监听了这个事件,然后调用 render
方法重新渲染父视图。
子视图不需要监听父模型的事件,因此不会重新渲染。