Skip to content

Instantly share code, notes, and snippets.

@anshula

anshula/app.js

Last active August 29, 2015 14:02
Show Gist options
  • Save anshula/d6e692dd2f21c196f1ce to your computer and use it in GitHub Desktop.
Save anshula/d6e692dd2f21c196f1ce to your computer and use it in GitHub Desktop.
Download ZIP
Peepcode's "Fire Up Ember.js" updated to work with Ember 1.5.1
Raw
app.js
App = Ember.Application.create({
LOG_TRANSITIONS: true
});
// Router
App.Router.map(function() {
this.resource('tables', function() {
this.resource('table', { path: ':table_id' });
});
});
//Routes
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('tables');
}
});
App.ApplicationRoute = Ember.Route.extend({
setupController: function() {
this.controllerFor('food').set('model', this.store.findAll('food'));
}
});
App.TableRoute = Ember.Route.extend({
setupController: function(controller, model) {
//set up my own (default behavior, must write in order to avoid overwrite)
controller.set('model', model);
//set up others
this.controllerFor('tables').set('selectedTable', model);
}
});
//
App.TablesRoute = Ember.Route.extend({
model: function() {
return this.store.findAll('table');
}
});
// Controllers
// Implement explicitly to use the object proxy.
App.TablesController = Ember.ArrayController.extend({
sortProperties: ['id']
});
App.TabController = Ember.ObjectController.extend({
});
App.FoodController = Ember.ArrayController.extend({
needs: 'tables',
myTable: Ember.computed.alias('controllers.tables.selectedTable'),
actions: {
addFood: function(food) {
var tabItems = this.get('myTable').get('tab.tabItems');
var tabItem = this.store.createRecord('tabItem', {
food: food,
cents: food.get('cents')
});
tabItem.save().then(function(tabItem){
tabItems.addObject(tabItem);
});
}
}
});
// Handlebars Helpers
Ember.Handlebars.registerBoundHelper('money', function(value) {
if (isNaN(value)) { return "0.00"; }
return (value % 100 === 0 ?
value / 100 + ".00" :
parseInt(value / 100, 10) + "." + value % 100);
});
Ember.Handlebars.registerBoundHelper('debug', function(value) {
return console.log(value.toString());
});
//Models
App.ApplicationAdapter= DS.FixtureAdapter.extend();
App.Table = DS.Model.extend({
tab: DS.belongsTo('tab')
});
App.Tab = DS.Model.extend({
tabItems: DS.hasMany('tabItem'),
cents: function() {
return this.get('tabItems').getEach('cents').reduce(function(accum, item) {
return accum + item;
}, 0);
}.property('tabItems.@each.cents')
});
App.TabItem = DS.Model.extend({
cents: DS.attr('number'),
food: DS.belongsTo('food')
});
App.Food = DS.Model.extend({
name: DS.attr('string'),
imageUrl: DS.attr('string'),
cents: DS.attr('number')
});
App.Table.FIXTURES = [{
id: 1,
tab: 1
}, {
id: 2,
tab: 2
}, {
id: 3,
tab: 3
}, {
id: 4,
tab: 4
}, {
id: 5,
tab: 5
}, {
id: 6,
tab: 6
}];
App.Tab.FIXTURES = [{
id: 1,
tabItems: []
}, {
id: 2,
tabItems: []
}, {
id: 3,
tabItems: []
}, {
id: 4,
tabItems: [400, 401, 402, 403, 404]
}, {
id: 5,
tabItems: []
}, {
id: 6,
tabItems: []
}];
App.TabItem.FIXTURES = [{
id: 400,
cents: 1500,
food: 1
}, {
id: 401,
cents: 300,
food: 2
}, {
id: 402,
cents: 700,
food: 3
}, {
id: 403,
cents: 950,
food: 4
}, {
id: 404,
cents: 2000,
food: 5
}];
App.Food.FIXTURES = [{
id: 1,
name: 'Pizza',
imageUrl: 'img/pizza.png',
cents: 1500
}, {
id: 2,
name: 'Pancakes',
imageUrl: 'img/pancakes.png',
cents: 300
}, {
id: 3,
name: 'Fries',
imageUrl: 'img/fries.png',
cents: 700
}, {
id: 4,
name: 'Hot Dog',
imageUrl: 'img/hotdog.png',
cents: 950
}, {
id: 5,
name: 'Birthday Cake',
imageUrl: 'img/birthdaycake.png',
cents: 2000
}];
Raw
index.html
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>Ordr: Rstaurant Mnu Systm</title>
<!-- Included CSS Files (Compressed) -->
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<script type="text/x-handlebars" data-template-name="application">
<div class="row">
<div class="twelve columns">
<h1>Ordr</h1>
<hr>
<p>{{outlet}}</p>
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="tables">
<div class="row">
<div class="four columns" id="tables">
{{ partial "tableMenu" }}
</div>
<div class="eight columns" id="order">
{{ outlet }}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="_tableMenu">
<h2>Tables</h2>
{{#each table in controller}}
{{#link-to "table" table class="panel six columns"}} {{ table.id }}{{/link-to }}
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="tables/index">
<h2>Select a table at left</h2>
</script>
<script type="text/x-handlebars" data-template-name="table">
<div class="row">
<div class="three columns">
{{ render "food" }}
</div>
<div class="nine columns">
<h2>Table <span>{{ id }}</span></h2>
{{ render "tab" tab }}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="food">
<ul id="menu">
{{#each controller}}
<li>
<a href="#" {{action "addFood" this}}>
<img {{ bind-attr src="imageUrl" }}>
<p>{{ name }}</p>
</a>
</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="tab">
<ul id="customer-tab">
{{#each tabItem in tabItems}}
<li><h3>{{tabItem.food.name}} <span>${{money tabItem.cents}}</span></h3></li>
{{else}}
<li><h3>Click a food to add it</h3></li>
{{/each}}
<li id="total"><h3>Total <span>${{money cents}}</span></h3></li>
</ul>
</script>
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.5.1.js"></script>
<script src="js/libs/ember-data-1.0.0-beta.8.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment