How do I access a model in a controller?

2
votes

This is a pretty basic, but for some reason I can't get it working.

I've created a companies resource:

App.Router.map(function() {
    this.resource('companies');
});

and specified a model

App.Company = DS.Model.extend({
    name: DS.attr('string'),
});

App.CompaniesRoute = Ember.Route.extend({
    model: function() {
        return App.Company.find();
    }
});

I have some Fixtures for test data.

Now, shouldn't I have access to my companies data from the controller? Like this

App.CompaniesController = Ember.ArrayController.extend({
    length: function () {
        return this.get('length');
    }.property(),
});

I'm getting 0, and everything I've tried in this function makes me think somehow the controller isn't getting loaded with the data - even though I am able to loop through the models in my template, like this:

  <script type="text/x-handlebars" data-template-name="companies">
    <div class="row">
      <div class="span12">
        <h3>Companies</h3>
        {{#each controller}}
          <li>{{ name }}</li>
        {{/each}}
        </ul>
      </div>
    </div>
  </script>

Some parts of the docs show setupController instead of model: function() {}, but I'm not clear about the differences. I've tried both, to no success.

Any ideas?

2
ember.js

2 Answers

3
votes

Your should declare the path of the property (or properties), the Computed Property depends on. In this case, content.length:

App.CompaniesController = Ember.ArrayController.extend({
    length: function () {
        return this.get('content.length');
    }.property('content.length'),
});

Or use a Binding:

App.CompaniesController = Ember.ArrayController.extend({
    lengthBinding: 'content.length'
});

But computed properties require less work than bindings (internally), and are in general faster.

1
votes

you are declaring your 'length' as a property without observing for any changes to the content of the controller, so, when the instance of the controller is created, it is 0, that's why it is never updated, you can either do what Panagiotis says or you can also observer the '@each' property of the content:

App.CompaniesController = Ember.ArrayController.extend({
  length: function () {
    return this.get('length');
  }.property('@each')
});