Reputation: 2461
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?
Upvotes: 1
Views: 853
Reputation: 4770
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.[]')
Upvotes: 3