ember data array UI not updating on pushObject

问题

I have a list of product-tag that I fetch for my model.

Route:

model: function() {
  return {
    product_tags: this.store.find('product-tag', {merchant: merchId})
  }
}

I have a component that adds tags to the model, however when after I create the record and push it into the model (as suggested on other posts) my UI still isn't updating.

addTag: function(name) {
  tag = this.store.createRecord('product-tag', {
    name: name
  });
  this.model.product_tags.toArray().addObject(tag);  

  tag.save();
}


//model merchant.js
export default DS.Model.extend({
  user_id: DS.attr('number'),
  product_tags: DS.hasMany('product-tag', {async: true})
});

//model product-tag.js
export default DS.Model.extend({
 merchant: DS.belongsTo('merchant'),
 name: DS.attr('string'),
});

What am I doing wrong? Thanks in advance.

回答1:

You should make it array in the route, so u can use it always afterwards like u want. Your calling toArray() which makes a new Array instance, then your model is not hooked to the array u just made.

  model: function() {
      return {
        product_tags: this.store.query('product-tag', {merchant: merchId}).then(function(pt) {
           return pt.toArray(); 
        });
      }
    }

   var x = this.get('model.product_tags') === model's p_t // true
   var y = this.get('model.product_tags').toArray() === model's p_t // false

Later on just do

addTag: function(name) {
  this.get('store').createRecord('product-tag', {
    name: name
  }).save().then(function(saved){ 
     this.get('model.product_tags').pushObject(saved);
  }.bind(this);  
}

来源：https://stackoverflow.com/questions/32964664/ember-data-array-ui-not-updating-on-pushobject