2014/08/13 – Backbonejs

[來自： Backbone.js 開發秘笈 第7章]

Restful 服務調用

　　Collection.fetch() - 請求集合

　　Model.save() - 新增或修改模型（根據 Model.isNew() 方法判斷操作類型）

　　Model.destroy() - 刪除模型

　　Model.sync() - 請求的執行方法， fetch(), save(), destroy() 都調用其方法進行操作請求

(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);

?使用 HTML 5 本地存儲

(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 posted on 2014-08-13 16:40?MSchina 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/yoyoone23/p/3910496.html

總結

以上是生活随笔為你收集整理的2014/08/13 – Backbonejs的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。