如何从Backbone.js中的View对象中获取当前模板中的所有元素

Question

How to get all the input element from the current template in View object in backbone.js, so that I can check the value in input element.

/*template*/

<script id="emptemplate" type="text/template">
<input id="name" value="{name}"/>
<input id="address" value="{address}"/>
<input id="sex" value="{sed}"/>
<footer>
   <button id="save">save</button>
</footer>
</script>

/*javascript*/

var EmployeeView = Backbone.View.extend({
  ...
  render:function(){
  ....
  },
  events:{
    "click #save": "saveData"
  },
  saveData: function (e) {
        var Data = [];
        $('input').each(function (value, key) {
            /*my problem here:
             cannot able to get the value of input element!
             */
            var v = value;
            var k = key;
        });
    }
  });

Answer 1

update your render function to

render: function(){
       var template = _.template( $("#emptemplate").html(), {} );
       this.$el.html( template );
}

then try... it will add template to el of your view then you can bind and take actions on it

Answer 2

I come up with the solution, to iterate to all the input element in the current view to get the value from it. In the "saveData" event-handler when the user click the save button, like this:

saveData:function(){
var data=[];
this.$el.find('input').each(function(){
$input=$(this);
//build the array of [key, value]
data[$input.attr('id')] = $input.val();
}
});