重新渲染視圖導致輸入失去焦點

Question

我一直在反覆遇到這個問題。我有一個輸入視圖，我想在每個keyUp事件上設置和更新事物。問題是set被調用時觸發一個change事件，它重新渲染視圖導致輸入失去焦點。因此，在用戶鍵入一個字符後，輸入失去焦點，無法輸入。

發生這種情況的另一種情況是，當用戶單擊一個輸入時，我想向輸入周圍的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()}); 
}, 
}); 

到目前爲止，我已經使用{沉默：真正}周圍變得和手動更新的東西，但這造成混亂。

Answer 1

你基本上陷入了一種無限循環的情況，在這種情況下，你的視圖與你的模型緊密地綁定在一起，並且它們互相反饋。

當用戶鍵入瀏覽器文本輸入時，它們已經「更新視圖」。視圖已經代表了額外的文本。

因此，當您使用這些更改更新模型時，您不需要視圖來更新AGAIN，因爲它已經代表當前狀態。

因此，在這些情況下，您確實希望使用「無聲」，因爲您只是將模型與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()}); 
}, 
});