(function ($) {//define -------------------------------var Product = Backbone.Model.extend({idAttribute: "Id",url: "/ProductService.svc/Product"//Rest URL
    });var ProductCollection = Backbone.Collection.extend({model: Product,url: "/ProductService.svc/products"//rest URL
    });var ProductListView = Backbone.View.extend({tagName: "ul",events: {"click": "selectName"},selectName: function (e) {if (e.target.nodeName === "A") {this.collection.trigger("selected", this.collection.get($(e.target).attr("data-id")));}},render: function () {this.$el.html(_.map(this.collection.models, function (model) {return "<li><a href='javascript:;' data-id='" + model.get('Id') + "'>" + model.get('Name') + "</a></li>";}));return this;}});var EditPanelView = Backbone.View.extend({tagName: "div",events: {"click .btnUpdate": "update","click .btnCreate": "create","click .btnDestroy": "destroy"},update: function () {/* Backbone MethodMapcreate: "POST"delete: "DELETE"patch: "PATCH"read: "GET"update: "PUT"*//* 参数二{patch:true // is PATCH methodwait:true //同步方法}*/this.model.save({'Name': this.$el.find("input[type='textBox']")[0].value}, { success: this.success, operType: "update" });},create: function () {//Collection.create() 方法回调用 Model.save() 方法new Product({Name: this.$el.find("input[type='textBox']")[0].value}).save(null, { success: this.success, operType: "create" });},destroy: function () {this.model.destroy({ success: this.success, url: this.model.url + "/" + this.model.get('Id'), operType: "destroy" });},success: function (model, data, options) {//operate callbackswitch (options.operType) {//operType 自定义属性，标识回调函数的操作类型case "create":break;case "update":break;case "destroy":break;default:}},render: function () {this.$el.html("<label>Name:</label><input type='textBox' value='" + this.model.get("Name") + "'>" +"<input type='button' class='btnUpdate' value='Update'/>" +"<input type='button' class='btnCreate' value='Create'/>" +"<input type='button' class='btnDestroy' value='Destroy'/>");return this;}});$(function () {//instance ---------------------------------var productCollection = new ProductCollection();//fetch() 方法获取数据    [success and error 是成功的和异常的回调函数]/* fetch, save, destroy 方法都会调用 sync() 方法来执行 HTTP 请求 *//* sync() 方法参数method - [create, update, patch, delete, read]model - 需要同步的模型或集合options - $.ajax 所需要的参数*/productCollection.fetch({success: function (collection, response, options) {collection.on("selected", function (model) {$("#divEdit").html(new EditPanelView({ model: model }).render().el);});$('body').html(new ProductListView({ collection: collection }).render().el);$('body').append($("<div id='divEdit'></div>"));},error: function (collection, response, options) {alert('error');}});});
})(jQuery);

(function ($) {//依赖 backbone.localStorage.js//https://github.com/jeromegn/backbone.localStorage//define --------------------------var UserModel = Backbone.Model.extend();/* Backbone 的 LocalStorage Adapter 重写了 Backbone.sync() 方法。当模型关联上集合后，模型的 save() 方法可正常使用。*//* 注：创建模型时，不要调用 Model.save() 方法，而是调用 Collection.create() 方法 */var UserCollection = Backbone.Collection.extend({model: UserModel,//定义本地存储模型对象 [参数唯一性]localStorage: new Backbone.LocalStorage("userCollection")});
})(jQuery);

View Code