Using jsViews in backbone to make an editable area (http://jsfiddle.net/XuXtS/4/)

jsViews in Backbone

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>