Повторный рендеринг вызывает вход для потери фокуса

Question

Я продолжаю сталкиваться с этой проблемой снова и снова. У меня есть представление со входом, и я хочу устанавливать и обновлять вещи на каждом событии 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()}); 
}, 
}); 

До сих пор я получил вокруг него с помощью {молчать: истинно} и обновление вещи вручную, но это создает беспорядок.

Answer 1

Вы в основном получаете себя в виде бесконечной петлевой ситуации, когда вы слишком сильно привязываете свой взгляд к своей модели, и они снова загружаются друг в друга.

Когда пользователь вводит текст в браузере, они уже «обновляют представление». Представление уже представляет дополнительный текст.

Итак, когда вы обновляете модель с этими изменениями, вам не требуется просмотр для обновления AGAIN, поскольку он уже представляет текущее состояние.

Итак, в этих случаях вы действительно хотите использовать «тихий», поскольку вы просто синхронизируете модель с текущим состоянием пользовательского интерфейса и не нуждаетесь в модели для информирования о просмотре для обновления.

Что касается того, как часто это делается, я подозреваю, что на клавиатуре, вероятно, слишком много. Возможно, вы захотите сделать это на размытие или даже на какое-то «спасение».

Что касается другой проблемы, я не уверен, почему добавление класса в элемент приведет к повторному рендерингу представления. Вы просто делаете что-то вроде

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

Это не должно вызывать событие изменения вашей модели и заставлять рендер снова запускаться.

Оставить комментарий:

Вы должны получить более детальную то.

С точки зрения рендеринга, разбить индивидуальный рендеринг/обновление элементов представления на отдельные функции.

Связать события изменения конкретных свойств («изменить: имя») с теми более гранулированными функциями рендеринга, чтобы они обновили часть вида, которую вы хотите изменить, но не обновляете ввод текста.