2017-02-22 42 views
0

我正在學習Backbone.js並使用BackGrid呈現數據併爲最終用戶提供了一種在Microsoft MVC網站上編輯記錄的方法。爲了這個測試網格的目的,我使用了一個供應商模型。 BackGrid默認可以編輯數據(這對我的目的是有好處的)。我已將以下JavaScript添加到我的視圖中。只保存BackGrid網格上已更改的記錄?

var Vendor = Backbone.Model.extend({ 
 
    initialize: function() { 
 
     Backbone.Model.prototype.initialize.apply(this, arguments); 
 
     this.on("change", function (model, options) { 
 
      if (options && options.save === false) return; 
 
      model.url = "/Vendor/BackGridSave"; 
 
      model.save(); 
 
     }); 
 
    } 
 

 
}); 
 

 
var PageableVendors = Backbone.PageableCollection.extend(
 
{ 
 
    model: Vendor, 
 
    url: "/Vendor/IndexJson", 
 
    state: { 
 
     pageSize: 3 
 
    }, 
 
    mode: "client" // page entirely on the client side. 
 

 
}); 
 

 
var pageableVendors = new PageableVendors(); 
 
//{ data: "ID" }, 
 
//{ data: "ClientID" },   
 
//{ data: "CarrierID" }, 
 
//{ data: "Number" }, 
 
//{ data: "Name" }, 
 
//{ data: "IsActive" } 
 

 

 
var columns = [ 
 
    { 
 
     name: "ID", // The key of the model attribute 
 
     label: "ID", // The name to display in the header 
 
     editable: false, // By default every cell in a column is editable, but *ID* shouldn't be 
 
     // Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s. 
 
     cell: Backgrid.IntegerCell.extend({ 
 
      orderSeparator: '' 
 
     }) 
 
    }, { 
 
     name: "ClientID", 
 
     label: "ClientID", 
 
     cell: "integer" // An integer cell is a number cell that displays humanized integers 
 
    }, { 
 
     name: "CarrierID", 
 
     label: "CarrierID", 
 
     cell: "number" // A cell type for floating point value, defaults to have a precision 2 decimal numbers 
 
    }, { 
 
     name: "Number", 
 
     label: "Number", 
 
     cell: "string" 
 
    }, { 
 
     name: "Name", 
 
     label: "Name", 
 
     cell: "string" 
 
    }, 
 
    { 
 
     name: "IsActive", 
 
     label: "IsActive", 
 
     cell: "boolean" 
 
    } 
 
]; 
 

 
// initialize a new grid instance. 
 
var pageableGrid = new Backgrid.Grid({ 
 
    columns: [ 
 
    { 
 
     name:"", 
 
     cell: "select-row", 
 
     headercell: "select-all" 
 
    }].concat(columns), 
 
    collection: pageableVendors 
 
}); 
 

 
// render the grid. 
 
var $p = $("#vendor-grid").append(pageableGrid.render().el); 
 

 
// Initialize the paginator 
 
var paginator = new Backgrid.Extension.Paginator({ 
 
    collection: pageableVendors 
 
}); 
 

 
// Render the paginator 
 
$p.after(paginator.render().el); 
 

 

 
// Initialize a client-side filter to filter on the client 
 
// mode pageable collection's cache. 
 
var filter = new Backgrid.Extension.ClientSideFilter({ 
 
    collection: pageableVendors, 
 
    fields: ['Name'] 
 
}); 
 

 
// REnder the filter. 
 
$p.before(filter.render().el); 
 

 
//Add some space to the filter and move it to teh right. 
 
$(filter.el).css({ float: "right", margin: "20px" }); 
 

 
// Fetch some data 
 
pageableVendors.fetch({ reset: true });
@{ 
 
    ViewBag.Title = "BackGridIndex"; 
 
} 
 

 
<h2>BackGridIndex</h2> 
 

 
<div id="vendor-grid"></div> 
 

 
@section styles { 
 
    @Styles.Render("~/Scripts/backgrid.css") 
 
    @Styles.Render("~/Scripts/backgrid-select-all.min.css") 
 
    @Styles.Render("~/Scripts/backgrid-filter.min.css") 
 
    @Styles.Render("~/Scripts/backgrid-paginator.min.css") 
 

 
} 
 

 
@section scripts { 
 

 
    @Scripts.Render("~/Scripts/underscore.min.js") 
 
    @Scripts.Render("~/Scripts/backbone.min.js") 
 
    @Scripts.Render("~/Scripts/backgrid.js") 
 
    @Scripts.Render("~/Scripts/backgrid-select-all.min.js") 
 
    @Scripts.Render("~/Scripts/backbone.paginator.min.js") 
 
    @Scripts.Render("~/Scripts/backgrid-paginator.min.js") 
 
    @Scripts.Render("~/Scripts/backgrid-filter.min.js") 
 
    @Scripts.Render("~/Scripts/Robbys/BackGridIndex.js") 
 

 
}

當用戶編輯的行,它成功地觸發該撞擊model.Save()方法,並傳遞模型到保存動作,在這種情況下BackGridSave併成功保存記錄發生了變化,但似乎只有其中一家供應商發生了變化,纔將所有供應商都保存在模型中。有沒有辦法從JavaScript/Backbone.js/BackGrid到只通過一個供應商 - 更改的供應商?

更新:我意識到它不會發送每個供應商,但它多次發送相同的供應商,就好像更改事件多次觸發一樣。

+0

「將所有供應商保存在模型中」 - 通常在Backbone中模型表示單個記錄,而集合表示一組記錄。也許你需要使用一個集合而不是一個模型。 – mikeapr4

+0

您不需要調用父類的初始化'Backbone.Model.prototype.initialize.apply(this,arguments);',因爲初始化的目的將被覆蓋。 –

+1

另外,請包含[mcve]。 –

回答

1

我想我回答了我自己的問題。那麼,至少我得到了預期的結果。第一次之後,我剛剛添加了一個電話。似乎這不是必要的,但。

var Vendor = Backbone.Model.extend({ 
initialize: function() { 
    Backbone.Model.prototype.initialize.apply(this, arguments); 
    this.on("change", function (model, options) { 
     if (options && options.save === false) return; 
     model.url = "/Robbys/BackGridSave"; 
     model.save(); 
     model.off("change", null, this); // prevent the change event from  being triggered many times. 



    }); 
} 

});