5

我正在使用 Backbone.js 来显示人员及其数据的列表。

每个人都有自己的<div>。div 由生成_.template并包含<input>用于显示人员数据的字段，因此可以对其进行调整。

还有一个带有 的按钮class=".save"。在我看来，我有一个绑定到单击此按钮的功能。我正在寻找最佳方法来获取属于模型的<input>-tags的值。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 回答