UB not updated on pushObject

Question

I have a list of product tags that I retrieve 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, but when I create a record and insert it into the model (as suggested on other posts), my user interface is still not updated.

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? Thank you in advance.

Answer 1

You have to make an array in the route, so you can always use it after that, however you want. Your call toArray (), which creates a new Array instance, then your model is not connected to the newly created array.

  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 p_t // true
   var y = this.get('model.product_tags').toArray() === model p_t // false

Later just

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