Skip to content

Instantly share code, notes, and snippets.

@balinterdi balinterdi/app.js
Last active Aug 29, 2015

Embed
What would you like to do?
A tiny Ember "app" to demonstrate property paths on
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.