5

Backbone.js を使用して、人とそのデータのリストを表示しています。

すべての人はそれ自身を持ってい<div>ます。div によって生成され、調整できるように個人のデータを表示するためのフィールドが_.template含まれています。<input>

の付いたボタンもありますclass=".save"。私の見解では、このボタンのクリックにバインドされた関数があります。モデルに属する<input>タグの値を取得するための最良の方法を探しています。div

これが私のアプローチですが、より良いアプローチがあるかどうか疑問に思っています。私のテンプレートでは、モデルの ID に基づいて DOM 要素の ID を動的に割り当てました。同じロジックを使用して、ビュー内の要素を見つけます。

テンプレート

<input value="<%=name%>" id="name_<%=id%>"/>
<input value="<%=age%>" id="age_<%=id%>"/>
<input value="<%=address%>" id="address_<%=id%>"/>
<button class=".save">Save</button>

見る

events:{
    "click .save":"savePerson"
},

savePerson: function(){
    this.model.set({
        name: $("#name" + this.model.id).val(),
        address: $("#address_" + this.model.id).val(),
        age: $("#age_" + this.model.id).val()
    });
    this.model.save();
}
4

1 に答える 1

7

すべての人が独自のテンプレートを持つ異なるビュー インスタンスである場合は、ビューのテンプレートのセレクターのスコープを定義するだけです。

テンプレート

<form id="<%-id%>">
  <input value="<%-name%>" name="name"/>
  <input value="<%-age%>" name="age"/>
  <input value="<%-address%>" name="address"/>
  <button class=".save">Save</button>
</form>

見る

events:{
    "click .save":"savePerson"
},

savePerson: function(){
    this.model.set({
        name: this.$("input[name='name']").val(),
        age: this.$("input[name='age']").val(),
        address: this.$("input[name='address']").val()
    });
    this.model.save();
}

それ以外の場合、同じテンプレート/ビュー インスタンスに多くの人がいる場合 (良くない)、現在の人の id をキャッチして、上記のセレクター内var personId = this.$("#"+this.model.id)でこれを使用します。personId

PS:この値を補間する<%-value%>代わりに使用<%=value%>し、HTML エスケープします。

于 2013-08-16T12:44:20.253 に答える