JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<div id="container">foobar</div>
<script id="template" type="text/template">
<input type="text" name="name" />
<input type="text" name="address" />
<input type="text" name="email" />
</script>
JavaScript
var MyView = Backbone.View.extend({
events: {
'keyup input[type=text]' : 'update'
},
render: function () {
var content = _.template($('#template').text(), this.model.toJSON());
console.log(content);
this.$el.empty().append(content);
_.each(this.model.attributes, function (val, key) {
this.$('[name=' + key + ']').val(this.model.attributes[key]);
}, this);
return this;
},
update: function (e) {
var attributes;
e.preventDefault();
_.each(this.model.attributes, function (val, key) {
this.model.attributes[key] = this.$('[name=' + key + ']').val();
}, this);
this.model.set(attributes);
console.log(this.model.attributes);
}
});
Backbone.$ = jQuery;
var person = new Backbone.Model({
name: 'B. Obama',
address: '1600 Pennsylvania Ave',
email : '[email protected]'
});
var view = new MyView({ model: person });
jQuery('#container').empty().append(view.render().el);