如何使用新数据刷新Backgrid表？

Question

我的页面上有一个具有数据集合的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视图中更改开始日期或结束日期时，我都会触发这一点，但是我不知道接下来该做什么，因为我基本上需要在安装程序中重新运行上述所有代码。

有什么建议吗？谢谢!

Answer 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);
});

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