balinterdi/app.js

## app.js
App = Ember.Application.create();

App.User  = Ember.Object.extend({
  name: ''
});

var cory = App.User.create({ name: "Cory Filibuster" });

App.Badge = Ember.Object.extend({
  name: '',
  score: 0,
  unlocked: false
});

var rook = App.Badge.create({
  name: "R00k",
  score: 1,
  unlocked: true
});

var taciturn = App.Badge.create({
  name: "Taciturn",
  score: 10
});

var talkative = App.Badge.create({
  name: "Talkative",
  score: 100
});

var hemingway = App.Badge.create({
  name: "Hemingway",
  score: 1000
});

App.Router.map(function() {
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return [rook, taciturn, talkative, hemingway];
  },
  setupController: function(controller, model) {
    this._super(controller, model);
    controller.set('user', cory);
  }
});

App.IndexController = Ember.ArrayController.extend({
  sortProperties: ['score'],
  sortAscending: true,
  user: null,
  badgeCount: Ember.computed.alias('unlockedBadges.length'),
  unlockedBadges: Ember.computed.filterBy('model', 'unlocked'),
  unlockedScores: Ember.computed.mapBy('unlockedBadges', 'score'),
  totalScore: Ember.computed.sum('unlockedScores'),

  firstName: function() {
    return this.get('user.name').split(/\s+/)[0];
  }.property('user.name'),

  actions: {
    addBadge: function() {
      var newBadgeProperties = this.getProperties(['name', 'score']);
      newBadgeProperties.score = parseInt(newBadgeProperties.score, 10);

      var newBadge = App.Badge.create(newBadgeProperties);
      this.get('model').pushObject(newBadge);
      this.setProperties({ name: '', score: '' });
    },

    unlockAll: function() {
      this.get('model').setEach('unlocked', true);
    }
  }
});

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Badges</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="main.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.2.1.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.4.0/ember.js"></script>
</head>
<body>
  <script type="text/x-handlebars">
    <div class="container">
      {{outlet}}
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <div class="row">
      <div class="col-md-8">
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">Your badges</h3>
          </div>
          <div class="panel-body">
            <ul class="list-group">
              {{#each badge in arrangedContent}}
                <li {{bind-attr class=":list-group-item badge.unlocked::locked"}}>
                  {{badge.name}}
                  <span class="badge">{{badge.score}}</span>
                </li>
              {{/each}}
            </ul>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">New Badge</h3>
          </div>
          <form id="new-badge" class="center-block">
            <div class="panel-body row">
              <div class="col-md-6">
                <div class="input-group">
                  {{input class="form-control" type="text" placeholder="Name" value=name}}
                </div>
              </div>
              <div class="col-md-4">
                <div class="input-group">
                  {{input class="form-control" type="text" placeholder="Score" value=score}}
                </div>
              </div>
              <div class="col-md-2">
                <div class="input-group add-badge-button">
                  <button class="btn btn-primary" type="submit" {{action "addBadge"}}>
                    Add
                  </button>
                </div>
              </div>
            </div>
          </form>
          <!--
          <div id="unlock-all" class="row">
            <div class="col-md-12">
              <button class="btn btn-danger btn-md" type="button"
                {{action "unlockAll"}}>
                Unlock all
              </button>
            </div>
          </div>
          -->
        </div>
      </div>

      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">{{firstName}}'s profile</h3>
          </div>
          <div class="panel-body">
            <ul class="list-group">
              <li class="list-group-item">
                Badges:
                <span class="pull-right">{{badgeCount}}</span>
              </li>
              <li class="list-group-item">
                Total score:
                <span class="pull-right">{{totalScore}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </script>

  <script src="app.js"></script>
</body>
</html>

## main.css
html, body {
  margin: 20px;
}

.add-badge-button {
  left: -16px;
}

.locked {
  color: #999;
}
	App = Ember.Application.create();

	App.User = Ember.Object.extend({
	name: ''
	});

	var cory = App.User.create({ name: "Cory Filibuster" });

	App.Badge = Ember.Object.extend({
	name: '',
	score: 0,
	unlocked: false
	});

	var rook = App.Badge.create({
	name: "R00k",
	score: 1,
	unlocked: true
	});

	var taciturn = App.Badge.create({
	name: "Taciturn",
	score: 10
	});

	var talkative = App.Badge.create({
	name: "Talkative",
	score: 100
	});

	var hemingway = App.Badge.create({
	name: "Hemingway",
	score: 1000
	});

	App.Router.map(function() {
	});

	App.IndexRoute = Ember.Route.extend({
	model: function() {
	return [rook, taciturn, talkative, hemingway];
	},
	setupController: function(controller, model) {
	this._super(controller, model);
	controller.set('user', cory);
	}
	});

	App.IndexController = Ember.ArrayController.extend({
	sortProperties: ['score'],
	sortAscending: true,
	user: null,
	badgeCount: Ember.computed.alias('unlockedBadges.length'),
	unlockedBadges: Ember.computed.filterBy('model', 'unlocked'),
	unlockedScores: Ember.computed.mapBy('unlockedBadges', 'score'),
	totalScore: Ember.computed.sum('unlockedScores'),

	firstName: function() {
	return this.get('user.name').split(/\s+/)[0];
	}.property('user.name'),

	actions: {
	addBadge: function() {
	var newBadgeProperties = this.getProperties(['name', 'score']);
	newBadgeProperties.score = parseInt(newBadgeProperties.score, 10);

	var newBadge = App.Badge.create(newBadgeProperties);
	this.get('model').pushObject(newBadge);
	this.setProperties({ name: '', score: '' });
	},

	unlockAll: function() {
	this.get('model').setEach('unlocked', true);
	}
	}
	});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Badges</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="main.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.2.1.js"></script>
	<script src="http://builds.emberjs.com/tags/v1.4.0/ember.js"></script>
	</head>
	<body>
	<script type="text/x-handlebars">
	<div class="container">
	{{outlet}}
	</div>
	</script>

	<script type="text/x-handlebars" data-template-name="index">
	<div class="row">
	<div class="col-md-8">
	<div class="panel panel-primary">
	<div class="panel-heading">
	<h3 class="panel-title">Your badges</h3>
	</div>
	<div class="panel-body">
	<ul class="list-group">
	{{#each badge in arrangedContent}}
	<li {{bind-attr class=":list-group-item badge.unlocked::locked"}}>
	{{badge.name}}
	<span class="badge">{{badge.score}}</span>
	</li>
	{{/each}}
	</ul>
	</div>
	</div>
	</div>
	<div class="col-md-4">
	<div class="panel panel-default">
	<div class="panel-heading">
	<h3 class="panel-title">New Badge</h3>
	</div>
	<form id="new-badge" class="center-block">
	<div class="panel-body row">
	<div class="col-md-6">
	<div class="input-group">
	{{input class="form-control" type="text" placeholder="Name" value=name}}
	</div>
	</div>
	<div class="col-md-4">
	<div class="input-group">
	{{input class="form-control" type="text" placeholder="Score" value=score}}
	</div>
	</div>
	<div class="col-md-2">
	<div class="input-group add-badge-button">
	<button class="btn btn-primary" type="submit" {{action "addBadge"}}>
	Add
	</button>
	</div>
	</div>
	</div>
	</form>
	<!--
	<div id="unlock-all" class="row">
	<div class="col-md-12">
	<button class="btn btn-danger btn-md" type="button"
	{{action "unlockAll"}}>
	Unlock all
	</button>
	</div>
	</div>
	-->
	</div>
	</div>

	<div class="col-md-4">
	<div class="panel panel-default">
	<div class="panel-heading">
	<h3 class="panel-title">{{firstName}}'s profile</h3>
	</div>
	<div class="panel-body">
	<ul class="list-group">
	<li class="list-group-item">
	Badges:
	<span class="pull-right">{{badgeCount}}</span>
	</li>
	<li class="list-group-item">
	Total score:
	<span class="pull-right">{{totalScore}}</span>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</div>
	</script>

	<script src="app.js"></script>
	</body>
	</html>
	html, body {
	margin: 20px;
	}

	.add-badge-button {
	left: -16px;
	}

	.locked {
	color: #999;
	}