I'm trying to achive a toggle effect in Emberjs for some dynamically loaded data. Here is my adapter:
export default Ember.Object.extend({
findAll: function(){
return ajax('http://localhost:8000/api/v1/address-book/companies?includes=details')
.then(function(response){
return response.data.map(function(c){
return {
name: c.name,
website: c.details.data.website_url,
dev_website: c.details.data.development_website_url,
showDetails: false
};
});
});
}
});
Here is the HTML handlebars:
{{#each m in model}}
<tr>
<td >
<p style="cursor:pointer; color:#009688" {{ action 'displayDetails' m}}>{{m.name}}</p>
{{#if m.showDetails}}
<div class="">
<p><strong>Wesbite URL: </strong><a href="{{m.website}}">{{m.website}}</a></p>
<p><strong>Development Wesbite URL: </strong><a href="{{m.dev_website}}">{{m.dev_website}}</a></p>
</div>
{{/if}}
</td>
</tr>
{{/each}}
and here is the controller:
export default Ember.ArrayController.extend({
searchText: null,
actions: {
displayDetails: function(item){
item.toggleProperty('showDetails')
}
}
});
Now I'm trying to switch the models showDetails property from true to false every time the company name (p tag) is clicked. I know what I did works with properties of the controller itself but how can I achieve this in my model object?
Aucun commentaire:
Enregistrer un commentaire