I’d like to enable or disable a button depending on the number of displayed items.
Here is the route:
# routes/shop_languages.js
model() {
return RSVP.hash({
shopLanguages: this.store.query('shop-language', { shop_id: this.get('currentShop.shop').get('id')}),
languages: this.store.findAll('language')
});
},
So in a template I display the list of languages associated to the shop:
# templates/shop_langauges.hbs
<ul class="list-group list-group-flush">
{{#each model.shopLanguages as |lang|}}
<li class="list-group-item">
{{lang.tag}}
<button type="button" class="btn btn-danger btn-sm" disabled={{isDeleteButtonDisabled}} {{action "deleteLanguage" lang}}>
<span class="oi oi-trash"></span>
</button>
</li>
{{/each}}
</ul>
I hoped to be able to call the computed property defined s follows in shop_languages.js
controller:
# controllers/shop_languages.js
isDeleteButtonDisabled: computed('model.shopLanguages', function() {
let langs = this.get('model.shopLanguages');
console.log('langs: ' + langs.get('length'));
return langs.get('length') < 2;
}),
The console displays correctly the number of languages. But it does not work:
- the delete button is always displayed
- when I change for another shop, there is nothing displayed in the console, as if the CP has never been called.
What is wrong with that ? Is the syntax is correct ? I’ve just deleted 3 extra languages (there were 4 ones), came back to the shop and, - strange, → the button was disabled. Why so ? Caching os smth else ? Thank you.