Ember.Checkbox basics

Basics of Ember.Checkbox

by jdcravens

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://builds.emberjs.com/canary/ember-data.js"></script>
DEPRECATION: Action handlers implemented directly on controllers are deprecated in favor of action handlers on an `actions` object (clicked on <App.RoleCheckboxController:ember291>)

<script data-template-name="user-roles" type="text/x-handlebars">
  <label>
      {{view App.RoleCheckbox contentBinding="view.content"}}
      {{view.content}}
  </label>
</script>

JavaScript

App = Em.Application.create();

App.Roles = ["USER", "ADMIN", "GUEST"];

App.User = Em.Object.create({
  roles: ["USER", "ADMIN"]
});

App.RoleCheckbox = Em.Checkbox.extend({
  init: function(){
    this._super();
    this.set('controller', new App.RoleCheckboxController());  
  },
  userRolesBinding: 'parentView.user.roles',
  checked: function () {
    var userRoles = this.get('userRoles');
      return userRoles.contains(this.get('content'));
    }.property('content', 'userRoles.@each'),
    
  click: function (evt) {
    var controller = this.get("controller");
    controller.send('clicked',this.checked, this.content);
  }
});

App.RoleCheckboxController = Em.ObjectController.extend({
  clicked: function(checked,role){
    var userRoles = App.User.roles;
    console.log("userRoles = ", userRoles);
    console.log("role = ", role);
    console.log("will be: ", !checked ? "removed" : "added");
                
    if (checked) { 
      userRoles.pushObject(role); 
    }else{
      userRoles.removeObject(role);
    }
    console.log("updated userRoles = ", userRoles);
  },
});

App.ApplicationView = Em.CollectionView.extend({
  contentBinding: 'App.Roles',
  userBinding: 'App.User',
  tagName: 'ul',    
  itemViewClass: Em.View.extend({
    userBinding: 'parentView.user',
    templateName: 'user-roles'
  })
});