在骨干視圖中從模板中獲取DOM元素

Question

我使用Backbone.js顯示人員及其數據的列表。

每個人都擁有自己的<div> 。 div由_.template生成，包含<input>字段以顯示人員的數據，因此可以對其進行調整。

還有一個class=".save"的按鈕。 在我看來，我有一個綁定此按鈕的功能。 我正在尋找獲得屬於模型的div <input> -tags的值的最佳方法。

這是我的方法，但我想知道是否有更好的方法 。 在我的模板中，我基於模型的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();
}

Answer 1

如果每個人都是具有自己模板的不同視圖實例，則只需為視圖模板定義選擇器的范圍 ：

模板

<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轉義。