jeudi 26 mars 2015

How to highlight selected address?

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