Question

我正在使用Backgrid，我在Controller中创建了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
}

上述功能完美，项目按预期显示

显示表后，我们提供过滤功能ServerSide，如下所示：

  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?因此，一旦重置了集合，它应该重绘表格吗？或者我是否需要先清空桌子？我可能会出错的任何想法？

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

Backgrid不会使用更新的集合呈现网格

1 个答案: