backbone.js - 如何使用新数据刷新 Backgrid 表？

Question

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

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

// 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 中的开始或结束日期时，我都会触发此操作 View ，但我不确定从这里开始做什么，因为我基本上需要重新运行上述所有代码作为设置。

建议？谢谢!

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

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