如何使用新数据刷新后网格表

Question

我的页面上有一个包含数据集合的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);
});

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