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

Question

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

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

新添加的项目也被保存在数据库中。

如果我将路由中的模型挂钩更改为 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
  // 
  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>

Answer 1

您可能会打断 promise 的解析。尝试类似的东西：

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

Answer 2

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

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

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

Answer 3

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

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

{ items: [your items..]}

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

您的路由只能有一个 "model"，如果它是一个散列，那么 items 只是该散列上的一个键。

Answer 4

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

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

Why doesn't the newly added item render in the template?

ember.js

ember-data

ember-cli