1

I have an ember application which keeps track of a collection of users. I have a computed property which is supposed to keep track of the number of users in the system in my usersController.js:

App.UsersController = Ember.ArrayController.extend({
  sortProperties: ['name'],
  sortAscending: true 

usersCount: function(){
    return this.get('model.length');
  }.property('@each')

});

I'm trying to render this in my users template, which looks like this-

<script type = "text/x-handlebars" id = "users">

<div class="col-md-2">
{{#link-to "users.create"}}<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-plus"></button> {{/link-to}}

<div>Users: {{usersCount}}</div>
</div>
<div class="col-md-10">

  <ul class="list-group">
  {{#each user in controller}}
  <li class="list-group-item">
    {{#link-to "user" user}}
      {{user.name}}
    {{/link-to}}
  </li>
{{/each}}

</ul>

{{outlet}}
</div>
</script>

but it doesn't show the count. Why would this be?

bookthief
  • 2,443
  • 8
  • 41
  • 54

1 Answers1

3

If you want to observe the array itself and don't care about the values in it, your property should observe 'model.[]' instead, like

}.property('model.[]')

Example fiddle

Array docs

rallrall
  • 4,760
  • 1
  • 15
  • 15
  • Thanks for the answer, but I am having trouble getting it to work in the context of my users- would you mind taking a look at where I'm going wrong? http://jsfiddle.net/bookthief/PkT8x/457/ – bookthief Dec 13 '13 at 13:56
  • 1
    [Updated your fiddle](http://jsfiddle.net/PkT8x/458/). Your last fiddle had incorrect route/controller names, but I guess that is correct in your actual app. 'return this.get('model.length');' instead of return this.get('model').length; might be what fixed it. – rallrall Dec 15 '13 at 23:05