Backbone.js 重新渲染视图会导致输入失去焦点

我不断地碰到这个问题。我有一个带有输入的视图，我想在每个keyUp事件上设置和更新内容。问题是，当调用set时，它会触发一个更改事件，重新呈现视图，从而导致输入失去焦点。因此，在用户键入一个字符后，输入失去焦点，无法再键入

另一种情况是，当用户单击输入时，我想在输入周围的div中添加一个类，以便它更改颜色。这当然会导致视图重新渲染，并且输入失去焦点。我不能简单地为输入创建单独的视图，因为输入在我要重新渲染的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}和手动更新解决了这个问题，但这会造成混乱。

你基本上陷入了一种无限循环的状态，你的视图与模型绑定得太紧，它们相互反馈

当用户在浏览器中键入文本输入时，他们已经在“更新视图”。视图已表示额外的文本

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

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

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

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

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

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

发表评论：

你需要变得更精细

在渲染方面，将视图元素的单独渲染/更新分解为单独的函数

将特定于属性的更改事件（“更改：名称”）绑定到那些更精细的呈现函数，以便它们更新您希望更改的视图部分，但不更新文本输入

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()});
},
});

---

是的，视图中已经有用户键入的文本，但我想根据用户键入的内容对视图执行其他操作。当他们单击一个输入时，我想将模型设置为selected，这会调用一个更改事件，该事件会用一个看起来是selected的事件重新渲染视图，从而导致视图失去焦点。