在Ember.js中保存新的模型实例并在转换到路由之前更新资源模型

Question

使用Ember，我们有一个从数据库中获取的鞋子列表。这些都列在“/鞋子”上。

this.resource('shoes', function() {
  this.route('new');
  this.route('show', {path: ':shoe_id'});
  this.route('edit', {path: ':shoe_id/edit'});
});

视图中只列出了MongoDB集合中的前10双鞋，如我们的webb中所指定的那样。当创建一个新鞋(使用嵌套路径' new ')，并转换回'/shoes‘时，新鞋将添加到当前的“鞋子”模型中。

export default Ember.ObjectController.extend({
  actions: {
    save: function() {
      this.get('model').save();
      this.transitionToRoute('shoes');
    }
  }
});

这就产生了11双鞋的清单。换句话说，它不使用路由并进行新的API调用。相反，它被添加到当前的鞋在模型的列表中。刷新页面时，结果按预期呈现，获取DB集合的10条第一条记录。

我们希望使‘transitionToRoute’执行路由并重新获取模型，而不是仅仅将它添加到当前模型中。我们已经看到了在控制器的“模型”作用域主体中如何使用“this.refresh()”和“this.reload()”的一些示例，但这些示例对我们来说并不适用。

是否可以使用“transitionToRoute”路径使用新的数据库值刷新模型？

Answer 1

基于您所写的内容，我猜您正在尝试使用分页，并且只希望在您的/shoes路线上列出前10只鞋？

如果是这样的话，"Ember的方式“是始终保持所有模型的同步，而不需要做特殊的工作，仅仅是为了获得人工更新的视图。在这种情况下，Ember有一个本地的shoes存储库，最初它有10个条目。然后再添加一个，它会同时保存数据库和Ember本地商店，所以现在Ember认为(正确的)您有11只鞋。仅仅因为Mongo返回10双鞋并不意味着整个数据集是10只鞋。

因此，处理这种情况的最佳方法是让视图显示底层模型数据的精确投影。换句话说，不要告诉你的观点显示“所有的鞋”。告诉它显示一个“过滤的所有鞋子列表”！

在实践中，我在ArrayController上看到了两种类型的过滤。一种是返回第一个n值。为此，请使用好的旧javascript slice (见MDN文档)。第二种是使用Ember filter函数。见Ember Docs。

最终，您的控制器应该是这样的：

鞋控制器：

export default Ember.ArrayController.extend( PaginatorClientSideMixin, {

    shoesFilteredOption1: function() {
        return this.get('arrangedContent') // 'arrangedContent' is the sorted list of underlying content; assumes your backing model is the DS.RecordArray of shoes
            // this use of slice takes an array and returns the first 10 elements
            .slice( 0, 10 );

        // we depend on 'arrangedContent' because everytime this changes, we need to recompute this value
    }.property('arrangedContent')

    shoesFilteredOption2: function() {
        return this.get('arrangedContent') // 'arrangedContent' is the sorted list of underlying content; assumes your backing model is the DS.RecordArray of shoes
            // here we're filtering the array to only return "active" shoes
            .filter( function(item, index, self ) {
                if (item.isActive) { return true; }
            })
    }.property('arrangedContent')

});

然后，在你的车把上，从shoesFilteredOption1而不是content或model读取模板。