2012-01-06 30 views
6

私はこの問題を何度も繰り返し実行しています。私は入力があるビューを持っており、すべてのkeyUpイベントの設定と更新が必要です。問題は、setが呼び出されて、入力をフォーカスを失わせるビューを再レンダリングする変更イベントをトリガするときです。したがって、ユーザーが1文字を入力すると、入力がフォーカスを失い、もう入​​力できなくなります。ビューを再描画すると入力がフォーカスを失う

これは、ユーザーが入力をクリックしたときに発生する場合もあります。色を変更するために、入力の周りの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()}); 
}, 
}); 

これまでのところ私は、{サイレント:真}を使用して、その周りに得ていると手動で物事を更新するが、これは混乱を作成します。

答えて

3

あなたは基本的に、あなたのビューをあなたのモデルにあまりにも強く束縛している無限のループ状況に身を任せており、彼らはお互いに戻ってきています。

ユーザーがブラウザのテキスト入力に入力すると、既に「ビューを更新しています」。ビューはすでに余分なテキストを表しています。

したがって、これらの変更でモデルを更新すると、既に現在の状態を表すので、ビューを更新する必要はありません。

これらのケースでは、モデルを現在のUIの状態と同期させているだけなので、実際には「サイレント」を使用したいし、更新するためにモデルにビューを知らせる必要はありません。

これを行う頻度については、キーアップがおそらく過剰であると思われます。あなたはぼかしで、あるいは何らかの「保存」アクションでさえしたいかもしれません。

他の問題点として、なぜ要素にクラスを追加すると、ビューが再レンダリングされるのかわかりません。

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

これは、モデルの変更イベントをトリガーしてレンダリングを再実行してはなりません。

コメントを投稿:

あなたはその後、より細かい取得する必要があります。

レンダリングに関して、ビューの要素の個々のレンダリング/更新を別々の機能に分割します。

変更したいビューの部分を更新するが、テキスト入力を更新しないように、より詳細なレンダリング関数にプロパティ固有の変更イベント( "change:name")をバインドします。

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

はいビューには既にユーザーが入力したテキストがありますが、入力内容に応じて他の操作を行いたいと考えています。彼らが入力をクリックすると、選択されたモデルを設定して、ビューを再表示する変更イベントを呼び出すようにして、ビューがフォーカスを失うようにします。 – Dan

関連する問題