Count number of users in ember.js

Question

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?

Answer 1

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