Chris Parry
Chris Parry

Reputation: 124

Ember Accessing Model Array with forEach()

I'm having an issue with upgrading ember-data form 0.X to 1.0.0-beta12. My ember.js version is 1.7.1. In my controller I have a method contentChanged(): which loops through my model:

this.get('model').forEach(function(story) {
    mutableComments.pushObject(story);
});

Since upgrading ember-data the structure for this.get('model'); has changed so forEach() isn't finding my array.

Before Update: Before

After Update:

After

The content originally is an array[20] but now it is a class which has a content property array[20]. I need to iterate through these items but the current code does not work.

I have tried. this.get('model').toArray()but this returned an empty array. How do I access the content array?

Edit: To add more context, the application uses this code to iterate through story objects and place them in a currentStories array. We do this with a Ember.Mixin that has feedSettings and use the Mixin where we want to create the feed.

    App.FeedRouteMixin = Ember.Mixin.create({
        /* When using the FeedRouteMixin, create a feedSettings object in the
         * route with any of the following properties. If a property is missing,
         * it will take the default value expressed below.

        feedSettings: {
            mountPoint: [],
            canCompose: true,
            firstLoad: true,
            ableToLoadMore: true,
            hasNewStories: false,
            complexFeed: true,
            feedType: "course"      // "course", "home", "profile" "announcement"
            canAnnounce: false,
            isAnnouncement: false,
            content: [],
            into: "user"
        },*/
        /**
         * Renders the feed using the feedSettings
         */
        renderFeed: function() {
            var fs = this.get("feedSettings");
            var feedController = this.controllerFor('feed');
            feedController.set('mountPoint', fs.mountPoint);
            feedController.set('canCompose', (typeof fs.canCompose != "undefined") ? fs.canCompose : true);
            feedController.set('firstLoad', (typeof fs.firstLoad != "undefined") ? fs.firstLoad : true);
            feedController.set('ableToLoadMore', (typeof fs.ableToLoadMore != "undefined") ? fs.ableToLoadMore : true);
            feedController.set('hasNewStories', (typeof fs.hasNewStories != "undefined") ? fs.hasNewStories : false);
            feedController.set('complexFeed', (typeof fs.complexFeed != "undefined") ? fs.complexFeed : true);
            feedController.set('feedType', (typeof fs.feedType != "undefined") ? fs.feedType : "course");
            feedController.set('is_announcement', (typeof fs.isAnnouncement != "undefined") ? fs.isAnnouncement : false);
            feedController.set('content', fs.content);

            this.render("feed", {
                outlet: "feed",
                into: fs.into,
                controller: feedController
            });
        },
        renderTemplate: function(controller, model){
            this.render();
            this.renderFeed();
        }
    });

This is where we use the mixin:

App.HomeRoute = Ember.Route.extend(App.FeedRouteMixin, App.FlagMixin, {
    feedSettings: {
        into: "home",
        feedType: "home"
    },
    setupController: function(controller, model) {
        this.feedSettings.content =  this.store.findAll('feedstory');
        controller.set('model', model);
        // console.log(model);
    },
    activate: function() {
        App.set("title", "Welcome!");
    }
});

Upvotes: 3

Views: 6773

Answers (1)

Lux
Lux

Reputation: 18240

This really looks like now you have a PromiseArray which is both, Promise and Array. Have you tried to resolve the Promise:

this.get('model').then(function(model) {
  model.forEach(function(story) {
    mutableComments.pushObject(story);
  });
});

However know that the then will execute async.

Upvotes: 3

Related Questions