Skip to content

Instantly share code, notes, and snippets.

@alex-seville
Created June 7, 2012 14:53
Show Gist options
  • Save alex-seville/2889221 to your computer and use it in GitHub Desktop.
Save alex-seville/2889221 to your computer and use it in GitHub Desktop.
Using jsViews in backbone to make an editable area (http://jsfiddle.net/XuXtS/4/)
var Form = Backbone.Model.extend({});
var FormView = Backbone.View.extend({
events: {
"click .save": "save",
"click .edit": "edit",
"click .cancel": "cancel"
},
initialize: function() {
//set up our input form template
$.templates({
movieTemplate: "#inputTemplate",
displayTemplate: "#displayTemplate"
});
//set up our viewmodel
this.viewModel = this.model.toJSON();
},
render: function(){
this.$el.html($("#displayTemplate").render(this.viewModel));
},
edit: function() {
//render the input form, and link the viewmodel
$.link.movieTemplate(this.viewModel, "#" + this.el.id);
},
save: function(event) {
event.preventDefault();
//merge changes back into model
this.model.set(this.viewModel);
this.render();
},
cancel: function(){
//reset the viewModel
this.viewModel = this.model.toJSON();
this.render();
}
});
//initial values for input form
var movieModel = new Form({
movie: 'Inception',
rating: 5
});
new FormView({
el: "#inputForm",
model: movieModel
}).render();
/////
<div id="inputForm"></div>
<script id="displayTemplate" type="text/x-jsrender">
<div>
<b>Movie:</b>
{{:movie}}
<b>Rating:</b>
{{:rating}}
</div>
<a href="#" class="edit">Edit</a>
</script>
<script id="inputTemplate" type="text/x-jsrender">
<div>
<b>Movie:</b>
<input type="text" data-link="movie" value="{{:movie}}" />
<b>Rating:</b>
<input type="text" data-link="rating" value="{{:rating}}" />
</div>
<a href="#" class="save">Save</a>
<a href="#" class="cancel">Cancel</a>
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment