backbone.jsデータリンク

Question

入力、モデル、およびdom要素をリンクしようとしています。

<div data-carName="Isetta"> 
    <input type="textfield" name="speed"/> 
    <br /> 
    <br /> 
    Speed: <br /> 
    <div>{speed}</div> 
</div> 

var Isetta = { 
    speed:speedval 
} 

私はそれを変更するにはスピードDOM要素、およびJavaScriptオブジェクト/モデルが同様に変更するためにカードの速度入力は、変更されるたびにしたい場合、私は何をしますか？

これはjQueryのデータリンクで簡単に行うことができます。 backbone.jsでどうすればいいですか？

ありがとうございました。

Answer 1

あなたはまた、ユーザーが自分の入力に入力し終えたとき、あなたは、ビューを更新したモデルにイベントをトリガするように、入力フィールドに結合キーストロークイベントやタイマーを検討する必要があります。

あなたの場合その後、あなたのビューであなたのような何かを追加することができ、そのフィールドにid=nameを追加します。あなたは、ユーザがまだその入力フィールドに入力しているよう関数呼び出しスロットルにしたい場合は

events: { 
    "keypress #speed" : "updateViewOnEnter" 
}, 

updateViewOnEnter: function(e) { 
    if (e.keyCode != 13) return; 
    e.preventDefault(); 
    this.model.trigger('speed:change'); 
}, 

はレミーシャープからこのスロットル機能をチェックアウト： をhttp://remysharp.com/2010/07/21/throttling-function-calls/

events: { 
    "keypress #speed" : "updateViewOnDelayedKeypress" 
}, 

updateViewOnDelayedKeypress: function(e) { 
    throttle(function (e) { 
    this.model.trigger('speed:change'); 
    }, 250)); 
}, 

Answer 2

var Car = Backbone.Model.extend({ }); 

var CarView = Backbone.View.extend({ 
    model: Car, 
    initialize: function() { 
     this.model.bind('change', _.bind(this.render, this)); 
    } 
    render: function() { ... } 
} 

車のモデルはイベントを生成し、CarViewはそれらに応答します。イベントのリストははるかに広範であり、好きな場合はデータリンクのものよりも自分自身を追加することができます。 jQuery Data-Linkはフォームに完全に関係しているように見え、フィルタリングのメカニズムは限られています。面白いですが、バックボーンや他のMVCライブラリとは異なる問題に取り組んでいることは明らかです。

Answer 3

さらに、このライブラリをチェックアウトすることもできます：https://github.com/derickbailey/backbone.modelbindingあなたのためにダイナミックでコンベンショナルベースのバインディングを処理するモジュールを追加します。