EMBER WORKSHOP: Computed Properties using @each

Computed Properties using @each

by jdcravens

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>

JavaScript

App = Ember.Application.create({});

// Computed property that relies on all of the items in an array to determine its value. 

App.PlayersController = Ember.Controller.extend({
    
  players: [
    Ember.Object.create({ name: 'CrafterJohn', isOnline: true }),
    Ember.Object.create({ name: 'MinerPaul', isOnline: true }),
    Ember.Object.create({ name: 'ExplorerRingo', isOnline: true })
  ],

  online: function() {
    var players = this.get('players');
    return players.filterBy('isOnline', true).get('length');
  }.property('[email protected]')
    
});

App.playersController = App.PlayersController.create();
console.log('number of players online: ' + App.playersController.get('online'));

// Pull a player offline
console.log('First player logs out.');
var players = App.playersController.get('players');
var first_player = players.objectAt(0);
first_player.set('isOnline', false);

console.log('number of players online: ' + App.playersController.get('online'));

// Add a new player
console.log('TraderGeorge logs in.');
new_player = Ember.Object.create({ name: 'TraderGeorge', isOnline: true });
players.pushObject(new_player);
console.log('number of players online: ' + App.playersController.get('online'));