jeudi 7 mai 2015

changing the value of a model property emberjs

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