CODEWITHSUNDEEP
data-bindingember.js
graup
graup

Reputation: 1099

Cannot access property of Ember.js model

I have a problem accessing model properties in Ember.js

Model:

App.Page = DS.Model.extend({
  title: DS.attr('string'),
  parent: DS.attr('number'),
});

Controller:

App.BlocksController = Ember.ArrayController.extend({

  pages: function() {
    return App.Page.find();
  }.property(),

  pageTree: function() {
    var pages = this.get('pages.content'),
        pageTree = new Tree();
    for(var i = 0; i < pages.length; i++) {
        console.log( pages[i], pages[i].id, pages[i].parent );
    }
    pageTree.insertList(pages);
    return pageTree;
  }.property('pages.@each'),

});

I use the pageTree property in a template/view. The console.log does print me objects that have been retrieved from the API (incl. id), however, I cannot access its properties (parent giving me undefined, but it's in the API response).

One console.log lines looks like this:

Object {id: "5", clientId: 19, type: function, data: Object, prematerialized: Object…}
"5"
undefined

I assume that using pages.@each as a property, the pageTree property should be bound to the (loaded) pages array.

Yes, pages is not the model that is controlled by the ArrayController, but a secondary set of models.

When I use {{#each pages}}{{parent}}{{/each}} in the template, it works! So I guess, the problem has to do with the data bindings?

For reference, I'm on Ember 1.0.0-rc.6.1, ember-data 0.13, ember-data-django-rest-adapter 0.13

Upvotes: 1

Views: 737

Answers (1)

graup
graup

Reputation: 1099

Okay, thanks to the IRC:

pageTree: function() {
  var pages = this.get('pages'),
    pageTree = new Tree();
  pages.forEach(function(page) {
    //console.log(page, page.get('parent'));
    pageTree.insertAt(page.get('parent'), page );
  });
  return pageTree;
}.property('pages.@each'),

So, no .content, but forEach and .get().

Upvotes: 2

Related Questions