Ember Starter Kit

by carpeliam

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
<script src="http://builds.emberjs.com/release/ember.min.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.min.js"></script>
<script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
      {{selectedWidgetCount}} widgets selected
    <ul>
        <li>
            <a {{action 'selectAll'}} {{bind-attr class=":btn :btn-default isAllSelected:active"}}>
              All
            </a>
        </li>
    {{#each itemController="widget"}}
      <li>
          <a {{action 'select'}} {{bind-attr class=":btn :btn-default isSelected:active"}}>
              {{name}}
          </a>
      </li>
    {{/each}}
    </ul>
  </script>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
/* Put your CSS here */
 html, body {
    margin: 20px;
}

JavaScript

App = Ember.Application.create();

App.ApplicationAdapter = DS.FixtureAdapter;

App.User = DS.Model.extend({
  username: DS.attr(),
  email: DS.attr(),
  preferences: DS.attr()
});

App.Widget = DS.Model.extend({
  name: DS.attr()
});

App.initializer({
    name: 'loadCurrentUser',
    initialize: function(container) {
        var store = container.lookup('store:main');
        var user = store.push('user', {"id":"1", "preferences": {"selectedIds": ["1"]}});
        container.optionsForType('user', {instantiate: false});
        container.register('user:current', store.find('user', user.id));
        container.typeInjection('controller', 'currentUser', 'user:current');
        container.typeInjection('route', 'currentUser', 'user:current');
    }
});

App.initializer({
    name: 'loadWidgets',
    initialize: function(container) {
        var store = container.lookup('store:main');
        store.pushMany('widget', [
            {"id": "1", "name": "Red"}, {"id": "2", "name": "Yellow"}, {"id": "3", "name": "Blue"}
        ]);
    }
});
App.IndexRoute = Ember.Route.extend({
    setupController: function(controller) {
        var store = this.get('store');
        controller.set('model', store.all('widget'));
    }
});

App.IndexController = Ember.ArrayController.extend({
  selectedWidgets: function() {
    var ids = this.get('currentUser.preferences.selectedIds');
    return this.get('model').filter(function(widget) {
      return ids.contains(widget.get('id'));
    });
  }.property('currentUser.preferences.selectedIds'),
  isAllSelected: function() {
    return this.get('selectedWidgets.length') === this.get('model.length');
  }.property('selectedWidgets.length','model.length'),
  selectedWidgetCount: function() {
    return this.get('selectedWidgets.length');
  }.property('selectedWidgets.length'),
  actions: {
      selectAll: function() {
          var ids;
          if (this.get('isAllSelected')) {
              ids = [];
          } else {
              ids =...