backbone.js - 重新渲染 View 导致输入失去焦点

Question

我一遍又一遍地遇到这个问题。我有一个输入 View ，我想在每个 keyUp 事件上设置和更新内容。问题是当 set 被调用时，它会触发一个更改事件，该事件会重新渲染导致输入失去焦点的 View 。所以在用户输入一个字符后，输入失去焦点，他们不能再输入了。

发生这种情况的另一种情况是当用户单击输入时，我想在输入周围的 div 中添加一个类，以便它改变颜色。这当然会导致 View 重新渲染并且输入失去焦点。我不能简单地为输入创建一个单独的 View ，因为输入在我想要重新渲染的 div 内。

这是一个简单的例子。

itemView = Backbone.View.extend({
events: {
    "keyup .itemInput": "inputKeyUp"
}
initialize: function(){
    this.model.view = this;
    this.bind('change', this.render());
    this.render();
},
render: function(){
    $(this.el).html( $(ich.itemView( this.model.toJSON() )) );
    return this;
},
inputKeyUp: function(e) {
    this.model.set({name: $(this.view.el).find('input[type=text]').first().val()});
},
});

到目前为止，我已经通过使用 {silent:true} 并手动更新内容来解决它，但这会造成困惑。

Answer 1

你基本上让自己陷入了一种无限循环的情况，你将 View 与模型绑定(bind)得太紧，并且它们相互反馈。

当用户输入浏览器文本输入时，他们已经在“更新 View ”。 View 已经代表了额外的文本。

因此，当您使用这些更改更新模型时，您不需要再次更新 View ，因为它已经代表了当前状态。

因此，在这些情况下，您确实希望使用“静默”，因为您只是将模型与 UI 的当前状态同步，并且不需要模型通知 View 进行更新。

至于多久执行一次，我怀疑 keyup 可能是过度的。您可能希望在模糊或某种“保存”操作上执行此操作。

至于另一个问题，我不确定为什么向元素添加类会导致 View 重新呈现。你只是在做类似的事情

this.$('input[type="text"]').addClass('active')

这不应触发模型的更改事件并导致渲染再次运行。

发表评论:

那么你需要变得更细化。

在渲染方面，将 View 元素的单独渲染/更新分解为单独的功能。

将特定于属性的更改事件(“更改:名称”)绑定(bind)到那些更精细的呈现函数，以便它们更新您希望更改的 View 部分，但不更新文本输入。

itemView = Backbone.View.extend({
events: {
    "keyup .itemInput": "inputKeyUp"
}
initialize: function(){
    this.model.view = this;
    this.bind('change:name', this.update_other_stuff());
    this.bind('change:selected', this.add_class());
    this.render();
},
update_other_stuff: function(){
    this.$('.some_other_thing').html("some desired change");
    return this;
},
add_class: function(){
    this.$('input[type=text]').first().addClass('active');
    return this;
},
render: function(){
    $(this.el).html( $(ich.itemView( this.model.toJSON() )) );
    return this;
},
inputKeyUp: function(e) {
    this.model.set({name: $(this.view.el).find('input[type=text]').first().val()});
},
});