为什么新添加的项目没有在模板中呈现？答案

【问题标题】：Why doesn't the newly added item render in the template?为什么新添加的项目没有在模板中呈现？
【发布时间】：2015-01-29 15:54:57
【问题描述】：

到目前为止，我的 groupedItems 已在模板中正确呈现。但是当我点击add to cart 链接时，它会触发addToCart 操作。模板不呈现新项目...我必须手动刷新页面才能看到它。

我检查了 Ember Inspector，数据选项卡。新添加的项目已附加到列表中。那么，如果反映在数据存储中，它不应该在模板中也反映/呈现吗？

新添加的项目也被持久化在数据库中。

如果我将路由中的模型挂钩更改为items: this.store.find('item')，而不是items: this.store.find('item', { status: 'queued' })。一切正常...

我怀疑这是我的计算属性groupedItems 的管理方式。有什么指点吗？

// Routes
import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return Ember.RSVP.hash({
      // items: this.store.find('item'),
      // items: this.store.find('item').filterBy('status', 'queued'),
      items: this.store.find('item', { status: 'queued' }),
      // products: this.store.find('product', { status: 'available' })
    });
  },

  // You can use model.items to get items, etc
  // Since the model is a plain object you can just use setProperties
  // http://stackoverflow.com/questions/16463958/how-to-use-multiple-models-with-a-single-route-in-emberjs-ember-data
  setupController: function(controller, model) {
    // model.reload;
    controller.setProperties(model);
  },

  actions: {
    addToCart: function(product) {
      var _this = this;

      var item = _this.store.createRecord('item');
      item.set('product', product);

      item.save().then(function() {
        // _this.transitionTo(fromRoute);
      });
    }
  }
});

// Controller
import Ember from 'ember';

export default Ember.Controller.extend({
  groupedItems: function () {
    var result = [];

    this.get('items').forEach(function(item) {
    // this.get('items').filterBy('status', 'queued').forEach(function(item) {
      var hasProductId = result.findBy('productId', item.get('product.id'));

      if(!hasProductId) {
         result.pushObject(Ember.Object.create({
            productId:        item.get('product.id'),
            product:          item.get('product'),
            item:             item,
            numberOfProducts: 0,
            subtotalInCents:  0
         }));
      }

      var productFromResult = result.findBy('productId', item.get('product.id'));

      productFromResult.set('numberOfProducts', productFromResult.get('numberOfProducts') + 1);

      item.get('product').then(function(product){
        productFromResult.set('subtotalInCents', productFromResult.get('subtotalInCents') + product.get('amountInCents'));
      });
    });

    return result;
  }.property('items.@each')
});

// Template / hbs
<ul>
  {{#each groupedItems}}
    <li>
      <a href="#" {{action "addToCart" product}}>Add</a>
      / <a href="#" {{action "removeFromCart" item 'index'}}>Remove</a>
      {{numberOfProducts}} {{product.name}} P{{cents-to-pesos product.amountInCents}} / each
    </li>
  {{/each}}
</ul>

【问题讨论】：

标签： ember.js ember-data ember-cli

【解决方案1】：

要自动同步新记录，您应该使用store.filter 而不是store.find。查看 ember 文档了解更多详情：http://emberjs.com/api/data/classes/DS.Store.html#method_filter

【讨论】：

在模型钩子中包含items: this.store.filter('item', function(item) { return item.get('queued'); }).then(function(queuedItems) { return queuedItems; }) 甚至不会触发对items 端点的API 请求
试试items: this.store.filter('item', { status: 'queued' }, function(item) { return item.get('status') === 'queued'})。
store.find 还允许您将过滤器放入其中。它让你思考。 store.find 在添加新项目时无法更新商店，这是什么意思？

【解决方案2】：

也许这是您的setupController 方法。 setupController 的默认行为是设置controller 的model 属性。在这里，你只需要setProperties。

虽然这应该将值最初设置为正确的控制器值，但它可能只是将这些值设置为 Ember 数组，因此他们不知道您创建了一个新项目。

在创建项目之后（甚至在保存之后），您应该尝试通过调用 this.get('items').pushObject(item) 之类的方法将其添加到控制器的 items 数组中。

【讨论】：

console.log(this.get('items')); 我把它放在我的addToCart 操作中，我得到undefined。任何想法为什么？

【解决方案3】：

您的问题是您的模型是 RSVP.hash 的结果。

这意味着您的控制器模型如下所示：

{ items: [your items..]}

这意味着你不能说 this.addItems(items)，你必须说 this.get('model').items.pushObjects(items)。

你的路由只能有一个“模型”，如果它是一个散列，那么 items 只是那个散列上的一个键。

【讨论】：

【解决方案4】：

你可能会打断承诺的解决。尝试类似：

item.save().then(function(result) {
  return result;
  // _this.transitionTo(fromRoute);
});

【讨论】：