If the user clicks the li
entry, it triggers the useThisAddress
action, which sets isSelected
in the address
object to true
. From there bind-attr
takes care of setting the appropriate class (ie `border-black').
Is this the right way to go about this? Or is there a better way to write this?
Below code works. However, I am a bit uncertain about setting isSelected
true on the address
object, since it isn't a real property in the address
object model.
// Controller
import Ember from 'ember';
export default Ember.Controller.extend({
active: null,
actions: {
useThisAddress: function(address) {
address.set('isSelected', true);
var active = this.get('active');
if (active) {
active.set('isSelected', false);
}
this.set('active', address);
}
}
})
// Template
<ul>
{{#each address in model}}
<li {{bind-attr class='address.isSelected:border-black'}} {{action 'useThisAddress' address}}>
Address: {{address.address1}} {{address.address2}}, {{address.city}}, {{address.postalCode}}
</li>
{{/each}}
</ul>
Aucun commentaire:
Enregistrer un commentaire