CODEWITHSUNDEEP
ember.js
SuperMarco
SuperMarco

Reputation: 721

Emberjs CollectionView array in an array

Hi I would like to know if it was possible to use a more complex array for the collectionView.

Because for now I'm only using it like this :

App.GroupList = Ember.ArrayController.create({
    content: ['A','B','C','D'],
})

App.GroupListView = Ember.CollectionView.extend({
    tagName: 'tbody',
    contentBinding: "App.GroupList"
})

And display them like this :

<table class="table-history">
    {{#collection App.GroupListView}}
    <td class="col-left">
        {{view.content}}
    </td>
    <td>
        <span class="col-number-contact">0</td>
    </td>
    <td>
        <div class="ph-img"></div>
    </td>
    <td>
        <div class="ed-img"></div>
    </td>
    {{/collection}}
</table>

So far, so good, its working well, but I would like to add more information inside the content like this :

content: [
    ['A','1'],
    ['B','2'],
    ['C','3'],
]

And display the number in a second <td> tad (the one with the 0 inside). But its not working.. and I wouldn't even know how to display them in my template.

Someone already managed to passe a complex collection content ?

Upvotes: 0

Views: 29

Answers (1)

NicholasJohn16
NicholasJohn16

Reputation: 2409

You can use an array of objects instead like this:

App.GroupList = Ember.ArrayController.create({
    content: [{'id':1,val:'A'},{'id':2,val:'B'},{'id':3,val:'C'},{'id':4,val:'D'}];
});

Then in your template, you can access it like this:

<table class="table-history">
    {{#collection App.GroupListView}}
    <td class="col-left">
        {{view.content.val}}
    </td>
    <td>
        <span class="col-number-contact">{{view.content.id}}</td>
    </td>
    <td>
        <div class="ph-img"></div>
    </td>
    <td>
        <div class="ed-img"></div>
    </td>
    {{/collection}}
</table>

Upvotes: 2

Related Questions