如何用新数据刷新 Backgrid 表？答案

【问题标题】：How would I refresh a Backgrid table with new data?如何用新数据刷新 Backgrid 表？
【发布时间】：2013-11-23 15:05:01
【问题描述】：

我的页面上有一个 Backgrid 视图，其中包含一组数据。 Backgrid 视图上方是另一个称为“过滤器”的视图，它允许用户更改数据的日期范围，以便他们可以看到两个日期之间的结果。

我不确定刷新 Backgrid 视图内容的最简洁方法是什么。这是我的代码：

// Fetch data
var fetchingOrders = CRM.request("orders:entities");

// Create layout
var ordersLayout = new List.OrdersLayout();

$.when(fetchingOrders).done(function (orders) {

    var ClickableRow = Backgrid.Row.extend({
        events: {
            "click" : "rowClicked"
        },
        rowClicked: function () {
            CRM.trigger("order:show", this.model.get("RecordID"));
        }
    });
    var customersListView = new Backgrid.Grid({
        row: ClickableRow,
        columns: CRM.settings.columns.orders,
        collection: orders,
        className: "simple-table backgrid"
    });

    var filters = new List.Filters({});
    filters.on("orders:filter", function (startdate, enddate) {

    });


    ordersLayout.on("show", function () {
        ordersLayout.filters.show(filters);
        ordersLayout.backgrid.show(customersListView);
    });

    CRM.mainRegion.show(ordersLayout);
});

CRM.request("orders:entities") 行使用了这个函数：

getOrders: function (startdate, enddate) {
    var orders = new Entities.Orders();

    var defer = $.Deferred();
    orders.fetch({
        data: {
            action: "search",
            dateRangeColumn: "RecordDate",
            startDate: startdate || "2013-11-06",
            endDate: enddate || "2013-11-06",
            // startDate: startdate || Utilities.currentDate,
            // endDate: enddate || Utilities.currentDate
        },
        success: function (data) {
            defer.resolve(data);
        },
        error: function (collection, response, options) {
            console.log(response);
            console.log("Error loading Orders…");
        }
    });
    return defer.promise();
},

您可能已经注意到filters.on("orders:filter", function (startdate, enddate) { 块。每当用户在filters 视图中更改开始或结束日期时，我都会触发此操作，但我不确定从这里做什么，因为我基本上需要重新运行上述所有代码作为设置。

建议？谢谢！

【问题讨论】：

标签： backbone.js marionette backgrid

【解决方案1】：

我建议您将设置和数据获取部分分开。比如：

var ordersLayout = new List.OrdersLayout();

var ClickableRow = Backgrid.Row.extend({
    events: {
        "click" : "rowClicked"
    },
    rowClicked: function () {
        CRM.trigger("order:show", this.model.get("RecordID"));
    }
});
var customersListView = new Backgrid.Grid({
    row: ClickableRow,
    columns: CRM.settings.columns.orders,
    // don't set the collection here (see below)
    // collection: orders,
    className: "simple-table backgrid"
});

var updateData = function(startDate, endDate){

    var fetchingOrders = CRM.request("orders:entities");
    $.when(fetchingOrders).done(function (orders) {
      // update collection reference
      customersListView.collection = orders;
      // rerender the view
      customersListView.render();
    });
};

var filters = new List.Filters({});
filters.on("orders:filter", function (startdate, enddate) {
     // call the function updating the data each time the filter criteria change
     updateData(startdate, enddate);
});

// initially call the data update method once with the default params to display
// the initial data set
updateData("2013-04-28", "2013-09-29");


ordersLayout.on("show", function () {
    ordersLayout.filters.show(filters);
    ordersLayout.backgrid.show(customersListView);
});

我希望这至少能让你朝着正确的方向前进！

【讨论】：