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 charset="utf-8">
<title>Ember Simple Checkbox Architecture</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.7.0/ember.js"></script>
</head>
<body>
​
  <script type="text/x-handlebars" id="index">
    {{#if model}}
      <p>
      {{input type="checkbox" checked=allChecked id="allchecked" name="allchecked"}}
      <label for="allchecked">Toggle Select All</label>
      </p>
​
      <ul>
      {{#each model itemController="color"}}
        <li>
          {{input type="checkbox" checked=isChecked  }}
          <label >{{model.color}}</label>
        </li>
      {{/each}}
      </ul>
    {{else}}
      <strong>Please Add A Color...</strong>
    {{/if}}
    
    <hr>
    <strong>{{totalSelectedCount}}</strong> currently selected
    <hr>
    
    <button {{action 'add'}}>Add New Color</button>
    <button {{action 'remove'}}>Remove Selected</button>
  </script>
  
</body>
</html>
​
 
/* Put your CSS here */
html, body {
    margin: 20px;
}
​
label, input[type=checkbox] {
  cursor: pointer;
}
 
var COLORS = 'peachpuff khaki papayawhip cadetblue orchid seashell gainsboro thistle olivedrab aquamarine azure crimson darkslategray goldenrod cornsilk chartreuse darksalmon firebrick honeydew'.w();
var ID = 4;
​
App = Ember.Application.create();
​
App.IndexRoute = Ember.Route.extend({
  model: function() {
    return Ember.A([
      {color: 'red', id: 1},
      {color: 'yellow', id: 2},
      {color: 'blue', id: 3}
    ]);
  }
});
​
App.IndexController = Ember.ObjectController.extend({
  toggles: function(){ return Ember.A([]) }.property(),
  
  allChecked: function(key, value){
    if (arguments.length === 1) {
      var toggles = this.get('toggles');
      return toggles && toggles.isEvery('isChecked')
    } else {
      this.get('toggles').setEach('isChecked', value);
      return value;
    }
  }.property('toggles.@each.isChecked'),
  
  
  actions: {
    registerToggle: function(toggle) {
      this.get('toggles').addObject(toggle);
    },
    deregisterToggle: function(toggle) {
      this.get('toggles').removeObject(toggle);
    },
    add: function() {
      var color = COLORS[Math.floor(Math.random() * COLORS.length)];
      this.get('model').pushObject({color: color, id: ID++}); 
    },
    remove: function() {
      var allSelectedItems = this.get('allSelectedItems').mapBy('content');
      this.get('model').removeObjects(allSelectedItems);
    }
  }
});
​
App.ColorController = Ember.ObjectController.extend({
  isChecked: false,
  
  colorId: function() {
    return 'checkbox' + this.get('id');
  }.property('id'),
  
  registerOnParent: function() {
    this.send('registerToggle', this);
  }.on('init'),
                                                    
  willDestroy: function() {
    this.send('deregisterToggle', this);
  }
});
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers