在骨干视图中从模板中获取DOM元素

Question

我使用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();
}

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转义.