Skip to content

Instantly share code, notes, and snippets.

@jhliberty

jhliberty/index.html

Forked from anonymous/index.html
Created July 31, 2016 12:14
Show Gist options
  • Save jhliberty/1ff88b66b4d76c23e1e99af311538201 to your computer and use it in GitHub Desktop.
Save jhliberty/1ff88b66b4d76c23e1e99af311538201 to your computer and use it in GitHub Desktop.
Download ZIP
Ember Starter Kit v.1.13 component playground - cart total // source http://jsbin.com/tureza/8
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="v.1.13 component playground - cart total">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- materialize -->
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
<!-- materialize -->
<script src="http://builds.emberjs.com/tags/v1.13.5/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/tags/v1.13.5/ember.js"></script>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<style id="jsbin-css">
/* Put your CSS here */
html, body {
margin: 20px;
}
</style>
</head>
<body>
<div id='app'></div>
<pre id="logs"></pre>
<script type="text/x-handlebars">
{{#each items as |item|}}
{{item.name}}
${{input value=item.cost}}<br/>
{{/each}}
<button {{action 'add'}}>add</button>
Sub-Total: ${{subTotal}}<br/>
Taxes: ${{taxes}}<br/>
Total: ${{total}}
<h2>Ember JSBins</h2>
</script>
<script id="jsbin-javascript">
var App;
App = Ember.Application.create({
rootElement: '#app',
LOG_RESOLVER: false
});
App.Router.map(function() {});
App.ApplicationRoute = Ember.Route.extend();
App.SimpleTaxStrategy = Ember.Object.extend({
apply: function(cart) {
return cart.get('subTotal') * 0.5;
}
});
App.ApplicationController = Ember.Controller.extend({
items: Ember.A([
{
id: 1,
name: 'item1',
cost: 1
}, {
id: 2,
name: 'item2',
cost: 2
}, {
id: 3,
name: 'item3',
cost: 5
}
]),
taxStrategy: App.SimpleTaxStrategy.create(),
taxes: Ember.computed('items.[]', function() {
return (this.taxStrategy && this.taxStrategy.apply(this)) || null;
}),
subTotal: Ember.computed('items.@each.cost', function() {
return this.get('items').reduce((function(sum, item) {
return sum + parseInt(item.cost);
}), 0);
}),
total: Ember.computed('subTotal', 'taxes', function() {
return this.get('subTotal') + (this.get('taxes') || 0);
}),
actions: {
add: function() {
return this.get('items').pushObject({
id: get('items').length,
name: 'looks cool',
cost: 55
});
},
error: function(error) {
log(error.message);
}
}
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="v.1.13 component playground - cart total">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"><\/script>
<\!-- materialize -->
<\!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
<\!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"><\/script>
<\!-- materialize -->
<script src="//builds.emberjs.com/tags/v1.13.5/ember-template-compiler.js"><\/script>
<script src="//builds.emberjs.com/tags/v1.13.5/ember.js"><\/script>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
</head>
<body>
<div id='app'></div>
<pre id="logs"></pre>
<script type="text/x-handlebars">
{{#each items as |item|}}
{{item.name}}
${{input value=item.cost}}<br/>
{{/each}}
<button {{action 'add'}}>add</button>
Sub-Total: ${{subTotal}}<br/>
Taxes: ${{taxes}}<br/>
Total: ${{total}}
<h2>Ember JSBins</h2>
<\/script>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">/* Put your CSS here */
html, body {
margin: 20px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">App = Ember.Application.create(
rootElement: '#app'
LOG_RESOLVER: false
)
App.Router.map ->
App.ApplicationRoute = Ember.Route.extend()
App.SimpleTaxStrategy = Ember.Object.extend
apply: (cart)->
cart.get('subTotal')*0.5
App.ApplicationController = Ember.Controller.extend(
items: Ember.A([
{id: 1, name:'item1', cost: 1},
{id: 2, name:'item2', cost: 2},
{id: 3, name:'item3', cost: 5}
])
taxStrategy: App.SimpleTaxStrategy.create()
taxes: Ember.computed 'items.[]', ->
(@taxStrategy && @taxStrategy.apply(@)) || null
subTotal: Ember.computed 'items.@each.cost', ->
@get('items').reduce(((sum, item)->
sum+parseInt(item.cost)
),0)
total: Ember.computed 'subTotal', 'taxes', ->
@get('subTotal') + (@get('taxes') || 0)
actions:
add: ->
@get('items').pushObject
id: get('items').length
name: 'looks cool'
cost: 55
error: (error) ->
log error.message
return
)</script></body>
</html>
Raw
jsbin.tureza.css
/* Put your CSS here */
html, body {
margin: 20px;
}
Raw
jsbin.tureza.js
var App;
App = Ember.Application.create({
rootElement: '#app',
LOG_RESOLVER: false
});
App.Router.map(function() {});
App.ApplicationRoute = Ember.Route.extend();
App.SimpleTaxStrategy = Ember.Object.extend({
apply: function(cart) {
return cart.get('subTotal') * 0.5;
}
});
App.ApplicationController = Ember.Controller.extend({
items: Ember.A([
{
id: 1,
name: 'item1',
cost: 1
}, {
id: 2,
name: 'item2',
cost: 2
}, {
id: 3,
name: 'item3',
cost: 5
}
]),
taxStrategy: App.SimpleTaxStrategy.create(),
taxes: Ember.computed('items.[]', function() {
return (this.taxStrategy && this.taxStrategy.apply(this)) || null;
}),
subTotal: Ember.computed('items.@each.cost', function() {
return this.get('items').reduce((function(sum, item) {
return sum + parseInt(item.cost);
}), 0);
}),
total: Ember.computed('subTotal', 'taxes', function() {
return this.get('subTotal') + (this.get('taxes') || 0);
}),
actions: {
add: function() {
return this.get('items').pushObject({
id: get('items').length,
name: 'looks cool',
cost: 55
});
},
error: function(error) {
log(error.message);
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment