Как обновить таблицу 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); 
}); 

Надеюсь, это по крайней мере поможет вам двигаться в правильном направлении!