Backgrid 不使用更新后的集合渲染网格

Question

我正在使用 Backgrid 并在我的控制器中创建如下 Backgrid 对象：

  $.when(recipeRequest).done(function (recipes) {
     List.grid = new Backgrid.Grid({
      columns: columns, // where columns is defined elsewhere
      collection: recipes // recipes is the result of a fetch
    })

  // Then add it to the Marionette template
}

以上完美运行并且项目按预期显示

显示 table 后，我们将在服务器端提供如下过滤功能：

  filterRecipes: function (query) {
  // remove any incomplete network requests
    _.each(RecipeManager.fetchXhrs, function (r) {
        r.abort()
     })
  // get a filtered set of recipes
  var filteredRecipes = RecipeManager.request('recipe:entities', query)
  $.when(filteredRecipes).done(function (recipes) {

     // this line shows that the result set is being updated as expected with for example 6 results
    console.log(recipes)

    // setting the new recipe result set to the grid.collection 
    List.grid.collection = recipes 

    // here the table rerenders but there are a LOT more results on the table - not 6 as expected
    List.grid.render()  
  })
}

我希望 table 在返回结果后用新集合重新填充，但我的 table 仍然显示所有旧记录。

我正在按照此处编写的示例进行操作 How would I refresh a Backgrid table with new data? 因此，一旦集合被重置，它应该重新绘制 table 吗？或者我需要先清空 table 吗？我有什么地方可能出错的想法吗？

Answer 1

来自backgridjs

Fully reactive. Relevant parts of the grid re-renders automatically upon data changes.

我没有查看带注释的源代码，但我猜测重新渲染与 collection 事件有关。因此，您不需要显式调用 render 方法。

 $.when(filteredRecipes).done(function (recipes) {

     // this line shows that the result set is being updated as expected with for example 6 results
     console.log(recipes)

     // setting the new recipe result set to the grid.collection 
     // considering recipes is backbone collection
     // if result is array of objects then List.grid.collection.reset(recipes)
     // it should re render the grid 
     List.grid.collection.reset(recipes.models); 
 })

Backgrid 不使用更新后的集合渲染网格

Backgrid doesn't render the grid with the updated collection

backbone.js

backgrid

marionette