La visualizzazione di ri-rendering fa sì che l'input perda la messa a fuoco

Question

Continuo a ripetermi questo problema ancora e ancora. Ho una vista con un input e voglio impostare e aggiornare le cose su ogni evento keyUp. Il problema è quando viene chiamato set che innesca un evento change che re-rende la vista che fa perdere l'attenzione all'input. Quindi, dopo che l'utente digita un carattere, l'input perde lo stato attivo e non possono più digitare.

Un altro caso in cui ciò accade è quando l'utente fa clic su un input. Desidero aggiungere una classe al div attorno all'ingresso in modo che cambi colore. Questo naturalmente fa sì che la vista venga ri-renderizzata e l'input perda fuoco. Non posso semplicemente creare una vista separata per l'input perché l'input è all'interno del div che voglio ri-render.

Ecco un semplice esempio.

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

Finora ci sono riuscito usando {silent: true} e aggiornando le cose manualmente, ma questo crea confusione.

Answer 1

Stai praticamente entrando in una sorta di situazione di loop infinito in cui leghi troppo strettamente la tua vista al tuo modello e si stanno rincalzando l'uno nell'altro.

Quando un utente digita in un testo di intput del browser, sta già "aggiornando la vista". La vista rappresenta già il testo in più.

Pertanto, quando si aggiorna il modello con tali modifiche, non è necessario aggiornare la vista per AGAIN, poiché rappresenta già lo stato corrente.

Quindi, in questi casi, si desidera veramente utilizzare "silenzioso", poiché si sta solo sincronizzando il modello con lo stato corrente dell'interfaccia utente e non è necessario che il modello informi la vista per l'aggiornamento.

Per quanto riguarda la frequenza di questa operazione, sospetto che il keyup sia probabilmente eccessivo. Potresti volerlo fare in sfocatura o, addirittura, in una sorta di azione "salva".

Per quanto riguarda l'altro problema, non sono sicuro del motivo per cui aggiungere una classe a un elemento causerebbe il rendering della vista. Siete semplicemente facendo qualcosa di simile

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

Questo non dovrebbe innescare evento di modifica del vostro modello e causare rendere a eseguire di nuovo.

Invia un commento:

devi ottenere più granulare poi.

In termini di rendering, interrompe il rendering/aggiornamento individuale degli elementi della vista in funzioni separate.

Associare eventi di modifica specifici delle proprietà ("modifica: nome") a quelle funzioni di rendering più granulari in modo che aggiornino la parte della vista che si desidera modificare, ma non aggiornano l'input di testo.

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