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

【问题标题】：Backgrid doesn't render the grid with the updated collectionBackgrid 不使用更新的集合渲染网格
【发布时间】：2015-11-25 12:41:01
【问题描述】：

我正在使用 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
}

上述工作完美，项目按预期显示

一旦表格显示出来，我们将在服务器端提供过滤功能，如下所示：

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

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

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

【问题讨论】：

标签： backbone.js marionette backgrid

【解决方案1】：

来自backgridjs

完全反应。网格的相关部分会在数据更改时自动重新渲染。

我没有浏览带注释的源代码，但我猜测重新渲染与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); 
 })

【讨论】：