Ember.js: Loop over data from ArrayController in unassociated View

Question

I have a route set up which pulls Account information from a REST endpoint:

Social.Router.map(function() {
    this.resource('accounts');
});

Social.AccountsRoute = Ember.Route.extend({
    model: function() {
        return Social.Account.find();
    }
});

Social.Account = DS.Model.extend({
    name: DS.attr('string'),
    username: DS.attr('string')
});

Social.AccountsController = Ember.ArrayController.extend();

I can loop over that data in my template like so:

<script type="text/x-handlebars" data-template-name="accountItem">
    {{#each account in controller}}
        <div class="avatar-name">
            <p>{{account.name}}</p>
            <p>{{account.username}}</p>
        </div>
    {{/each}}
</script>

I have another template in which I'd like to use the same account data. How would I retrieve the information associated with the Account model from within a View so that I can make it available in the corresponding template?

Social.NewPostView = Ember.View.extend({
    tagName: 'div',
    accounts: function(){
        // return Account data here?
    }
});

Update 1

Here's a quick view of my UI

On the left is "live" account data. On the right is static HTML. I'd like to reuse the data from the left on the right. Make sense?

If you have the new view nested under the one above you should have access to its context. Can you describe your UI and the routes in a little more detail? Do you need the exact same "find.all" again in the nested view or do you just need the UI to continue showing the array as you show something else? — Toran Billups
– Toran Billups, Commented Feb 26, 2013 at 22:23

ThomasDurin · Accepted Answer · 2013-02-27 18:34:33Z

3

You should take a look to the needs property for controllers. This allow you to specify a list of controllers you will be able to access from the current one.

More information on the emberjs guides

NewPostController

Social.NewPostController = Ember.ObjectController.extend({
    needs: ['accounts'],

    init: function(){
        this._super();
        console.log(this.get('controllers.accounts'))
    }
});

Then, from your template:

<script type="text/x-handlebars" data-template-name="newPost">
    {{#each account in controller.controllers.accounts}}
        <div class="avatar-name">
            <p>{{account.name}}</p>
            <p>{{account.username}}</p>
        </div>
    {{/each}}
</script>

edited Feb 27, 2013 at 18:34

answered Feb 26, 2013 at 22:35

ThomasDurin

2,0232 gold badges15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

commadelimited Over a year ago

Hrm. That seems like an excellent solution. I didn't already have a Social.NewPostController but I've added it and I get nothing. I tried debugging by accessing Social.NewPostController.get('accounts') in the console and I get a TypeError. I've never used the needs option before so there might be more to it than I'm realizing.

ThomasDurin Over a year ago

@commadelimited : If you want to debug from the console: Social.__container__.lookup("controller:newPost").get('controllers.accounts')

commadelimited Over a year ago

Thanks Thomas. I'll take a look at the additional lines you've added.

commadelimited Over a year ago

Thomas...those extra changes you added did the trick. Thanks so much! If it's not too much trouble could you explain what this is actually doing? I think I understand it but I'd like to hear the thought process you went through so I can get a better understanding of it in the future.

commadelimited Over a year ago

For future reference, this post by Kasper Tidemann was very helpful in explaining "needs" and how it works. Can't believe it's quite that simple: kaspertidemann.com/…

|

Collectives™ on Stack Overflow

Ember.js: Loop over data from ArrayController in unassociated View

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related