I have next code in a controller:
...
selectedIngredientsIds: [],
barItemsChanged: Ember.observer('user.barItems.[]', function() {
let ingredients = [];
if (this.get('user').get('barItems')) {
ingredients = this.get('user').get('barItems').map(function(item) {
return item.ingredientId;
});
}
this.set('selectedIngredientsIds', ingredients);
})
...
And template:
{{ingredient-chooser
multiple=false
ingredients=ingredients
changeIngredients="changeIngredients"
needToClear=needToClear
placeholder="Добавить в бар..."
selectedIngredients=selectedIngredients
selectedIngredientsIds=selectedIngredientsIds
ingredientSelected="ingredientSelected" }}
And ingredient-chooser component:
...
selectedIngredients: [],
selectedIngredientsIds: [],
selectedIngredientsChanged: Ember.observer('selectedIngredients.[]', function() {
this.sendAction("changeIngredients", this.get('selectedIngredients'));
}),
selectedIngredientsIdsChanged: Ember.observer('selectedIngredientsIds.[]', function() {
let self = this;
let ingredients = this.get('selectedIngredientsIds').map(findIngredientByRealId);
this.set('selectedIngredients', ingredients);
})
...
barItemsChanged observer works fine. selectedIngredientsChanged also works fine. Even if I check selectedIngredientsIds property it shows correct value. But for some reasons selectedIngredientsIdsChanged observer never called.
What I'm doing wrong?
I fixed the issues with next code:
Ember.run.scheduleOnce('afterRender', this, () => {
this.set('selectedIngredientsIds', ingredients);
});
instead of:
this.set('selectedIngredientsIds', ingredients);
I guess because user.barItems is part of model, barItemsChanged was called before components observers have been initialized.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments