Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="ED: Reading" />
  <script src="http://code.jquery.com/jquery-2.0.2.js"></script>
  <script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
  <script src="http://builds.emberjs.com/ember-1.0.0-rc.7.js"></script> 
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>
<body>
  
​
  <script type="text/x-handlebars">
   <h1>Contacts</h1>
     <ul>
      {{#each contact in controller}}
        <li {{bindAttr class="isSelected:yes:no"}}>
          {{contact.name}}
          <button {{action selectContact contact}}>Select</button>
        </li>
      {{/each}}
    </ul>
    
    <h1>Selected Contacts</h1>
    <ul>
      {{#each contact in controllers.selected_contacts}}
        <li>
          {{contact.name}}
        </li>
      {{/each}}
    </ul>
   
  </script>
  
</body>
</html>
 
.no{
  color:red;
}
.yes{
  color:green;
}
 
var App = Ember.Application.create();
​
App.ApplicationRoute = Ember.Route.extend({
​
  model: function(){
    var contacts = Ember.ArrayProxy.create({content: []});
    contacts.pushObject({name: 'Bill'});
    contacts.pushObject({name: 'Sally'});
    return contacts;
  },
  
  setupController: function(controller, model){
    controller.set('model', model);
    
    var selectedContacts = Ember.ArrayProxy.create({content: []});
    this.controllerFor('selected_contacts').set('content', selectedContacts);
  }
  
});
​
​
App.ApplicationController = Ember.ArrayController.extend({
​
  needs: ['selected_contacts'],
  selectedContacts: null,
  selectedContactsBinding: 'controllers.selected_contacts.content',
​
  itemController: 'contact',
​
  selectContact: function(contact){
    this.selectedContacts.pushObject(contact);
  }
​
});
​
​
App.SelectedContactsController = Ember.ArrayController.extend({
​
  itemController: 'contact',
  
  watcher: function(){
    console.log('Selected contents changed. Length: ' + this.get('content.length'));
  }.observes('content')
​
});
​
App.ContactController = Ember.ObjectController.extend({
​
  needs: ['selected_contacts'],
  selectedContacts: null,
  selectedContactsBinding: 'controllers.selected_contacts.content',
​
  isSelected: function(){
    console.log('Checking Selected for' + this.get('name'));
    return this.selectedContacts.contains(this.get('content'));
  }.property(
    'selectedContacts.@each'
  )
  
​
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jbasdfpro
0viewers