Access an object property, which is stored at the controller, in the template

1

Hey!

I have an object on my controller which acts as a hashmap to store some UI state. But I can’t access the values of the hashmap from the view. I scaffolded the app with ember-cli so I have a route, which fetches the data, a hbs-template for the view and a controller. To give you the idea I’ll post a simplified version my code:

ListController:

import Ember from 'ember';

export default Ember.ObjectController.extend({
    tenantUsers: [],
    sorted: {},
    actions: {
        sort: function (field) {
            if (Ember.isEmpty(this.get('sorted')[field])) {
                this.get('sorted')[field] = true;
            } else {
                this.get('sorted')[field] = !this.get('sorted')[field];
            }
            if (this.get('sorted')[field]) {
                    this.set('tenantUsers', this.get('tenantUsers').sortBy(field));
            } else {
                this.set('tenantUsers', this.get('tenantUsers').toArray().reverse());
            }
        }
    }
});

list.hbs

 [table]
    [tr]
        [th {{action 'sort' 'email' }} {{bind-attr class=":sortable sorted.email:sortable--asc" }}]{{t "userlist.th.email" }} {{ sorted.email }}[/th]
        [th {{action 'sort' 'firstname' }} {{bind-attr class=":sortable sorted.firstname:sortable--asc" }}]{{t "userlist.th.firstname" }}[/th]
        [th {{action 'sort' 'lastname' }} {{bind-attr class=":sortable sorted.lastname:sortable--asc" }}]{{t "userlist.th.lastname" }}[/th]
        [th {{action 'sort' 'username' }} {{bind-attr class=":sortable sorted.username:sortable--asc" }}]{{t "userlist.th.username" }}[/th]
        [th {{action 'sort' 'registerDate' }} {{bind-attr class=":sortable sorted.registerDate:sortable--asc" }}]{{t "userlist.th.registerdate" }}[/th]
        [th][/th]
    [/tr]

    {{#each user in tenantUsers }}
        [tr]
            [td]{{user.email}}[/td]
            [td]{{user.firstname}}[/td]
            [td]{{user.lastname}}[/td]
            [td]{{user.username}}[/td]
            [td]{{locale-datetime user.registerDate}}[/td]
            [td {{ action 'showUserInfo' user.id}}][span class="icon-info_32"][/span][/td]
        [/tr]
    {{/each}}
[/table]

I just want to add a CSS class when one of the properties is sorted ASC. But I dont have access to the value of the sorted hashmap. I think I’m doing something in a totally non-Ember-way. Maybe someone could guid me and tell me if I’m working against Ember.

Thanks Tschoartschi EDIT: for some reasons I can’t paste regular HTML into this post. So I replaced < with [

2

If you create a dummy property, is it visible in the template?

Controller.js

import Ember from 'ember';

export default Ember.ObjectController.extend({
    dummy: 'dummy',
    tenantUsers: [],
   ...
});

Template.hbs

<p>Name: {{dummy}}</p>

P.S. Use three backtics followed by html to embed html in comments.

3

Thank you for your response. Yes all the other properties are visible in the template. If I just write {{sorted}} I get [object]object in the template, but the nested attribute doesnt show up.

I’m kind of frustrated, because things like that happen really often to me with Ember. I’m learning Ember and everywhere it is stated that Ember is opinionated. When things dont work as I expect I’m never sure if I’m violating these opinions or if I just have some minor error somewhere. I hope someday I’ll grasp all the opinions behind Ember.

4

sorted is a Javascript object, and it’s getting type-converted into a String, which is why you’re getting shown [object Object]. sorted looks like it’s available in the template.

5

Yes I know that it is a JavaScript object and yes it is available on the template. But I can not display attributes of this object in the template. My question is: “Is this not possible (by design) or am I doing something wrong?”

6

I’m having the same problem, nested computed properties are not calculated/rendered properly.

This jsbin demonstrates the issue and the alternatives I’ve tried so far. Am I missing something simple or is the wrong approach?

7

I still don’t find a solution. Could someone please help us :slight_smile:

8

Yes ,I found the solution, you can access the object properties inside template with simple Object.attribute notation. The only reason I wasn’t able to was because I was saving the attribute in the mode as DS.attr(‘string’) which was converting the json object into a string. Once I changed it to DS.attr() which takes the format of data returned by server , it worked fine