Skip to content

Instantly share code, notes, and snippets.

/index.html

Created July 2, 2015 15:49
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/40973aed24d271192d5f to your computer and use it in GitHub Desktop.
Save anonymous/40973aed24d271192d5f to your computer and use it in GitHub Desktop.
Download ZIP
Ember Starter Kit // source http://emberjs.jsbin.com/cifawefito
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.13.2/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/tags/v1.13.2/ember.debug.js"></script>
<style id="jsbin-css">
/* Put your CSS here */
html, body {
margin: 20px;
}
</style>
</head>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each model as |item|}}
<li>{{item}}</li>
{{/each}}
</ul>
<h3>Initial Foos</h3>
{{#each initialFoos as |foo|}}
<p>
{{foo.a}} - {{foo.b}} - {{foo.c}} - {{foo.d}} - {{foo.observedFor}}
</p>
{{/each}}
<h3>Foos</h3>
{{#each foos as |foo|}}
<p>
{{foo.a}} - {{foo.b}} - {{foo.c}} - {{foo.d}} - {{foo.observedFor}}
</p>
{{/each}}
<h3>Foos Membership</h3>
{{#each foosMembership as |foo|}}
<p>
{{foo.a}} - {{foo.b}} - {{foo.c}} - {{foo.d}} - {{foo.observedFor}}
</p>
{{/each}}
<h3>Foos Updates</h3>
{{#each foosUpdates as |foo|}}
<p>
{{foo.a}} - {{foo.b}} - {{foo.c}} - {{foo.d}} - {{foo.observedFor}}
</p>
{{/each}}
<p><button {{action "observeInitialFoos"}}>Observe initial foos</button>
| <button {{action "unobserveInitialFoos"}}>Off</button></p>
<p><button {{action "observeFoos"}}>Observe foos</button>
| <button {{action "unobserveFoos"}}>Off</button></p>
<p><button {{action "addFoo"}}>Add a foo</button>
| <button {{action "setFoosA"}}>Set A</button>
| <button {{action "setFoosB"}}>Set B</button></p>
<p><button {{action "start"}}>Start</button> | <button {{action "stop"}}>Stop</button></p>
</script>
<script id="jsbin-javascript">
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
var foo = { a: 1, b: 2 };
return Ember.keys(foo);
}
});
var DATA_A = [{a: 1}, {b: 2}, {c: 3}, {d: 4}];
var DATA_B = [{a: 10}, {b: 20}, {c: 30}, {d: 40}];
App.IndexController = Ember.Controller.extend({
init: function() {
this._super.apply(this, arguments);
},
next: 0,
handle: null,
initialFoos: Ember.A(DATA_A),
foos: Ember.computed('initialFoos', function() {
console.log("Computing foos...");
return this.get('initialFoos').map(function(aFoo) {
return Ember.$.extend(true, {}, aFoo, {observedFor: "root"});
});
}),
foosMembership: Ember.computed('initialFoos.[]', function() {
console.log("Computing foosMemberships...");
return this.get('initialFoos').map(function(aFoo) {
return Ember.$.extend(true, {}, aFoo, {observedFor: "membership"});
});
}),
foosUpdates: Ember.computed('initialFoos.@each', function() {
console.log("Computing foosUpdates...");
return this.get('initialFoos').map(function(aFoo) {
return Ember.$.extend(true, {}, aFoo, {observedFor: "updates"});
});
}),
incNext: function() {
this.set('next', this.get('next') + 1);
},
start: function() {
this.set('handle', setInterval(this.get('addFoo').bind(this), 1000));
},
addFoo: function() {
// Push changes the array but doesn't not notify observers!!
// this.get('initialFoos').push({ a: this.get('next')});
// Push object does both!!
this.get('initialFoos').pushObject({ a: this.get('next')});
this.incNext();
},
updateFoo: function() {
this.get('initialFoos').pushObject({ d: this.get('next')});
},
onInitialFoosChanged: function(_, key) {
console.log("InitialFoos changed: ", key);
},
autoOnInitialFoosChanged: function(_, key) {
console.log("Auto observed initial foos changed!", key);
}.observes('initialFoos'),
autoOnInitialFoosUpdated: function(_, key) {
console.log("Auto observed initial foos updated!", key);
}.observes('initialfoos.@each'),
autoOnInitialFoosAddedRemoved: function(_, key) {
console.log("Auto observed initial foos added/removed!", key);
}.observes('initialfoos.[]'),
onFoosChanged: function(_, key) {
console.log("Foos changed: ", key);
},
autoOnFoosChanged: function(_, key) {
console.log("Auto observed foos changed!", key);
}.observes('foos'),
autoOnFoosUpdated: function(_, key) {
console.log("Auto observed foos updated!", key);
}.observes('foos.@each'),
autoOnFoosAddedRemoved: function(_, key) {
console.log("Auto observed foos added/removed!", key);
}.observes('foos.[]'),
actions: {
observeInitialFoos: function() {
console.log("Observe IFs");
this.addObserver("initialFoos", this, this.onInitialFoosChanged);
},
observeFoos: function() {
console.log("Observe Fs");
this.addObserver("foos", this, this.onFoosChanged);
},
unobserveInitialFoos: function() {
console.log("UNObserve IFs");
this.removeObserver('initialFoos', this, this.onInitialFoosChanged);
},
unobserveFoos: function() {
console.log("UNObserve Fs");
this.removeObserver('foos', this, this.onFoosChanged);
},
addFoo: function() {
this.addFoo();
},
updateFoo: function() {
this.updateFoo();
},
setFoosA: function() {
this.set('initialFoos', Ember.A(DATA_A));
},
setFoosB: function() {
this.set('initialFoos', Ember.A(DATA_B));
},
start: function() {
this.start();
},
stop: function() {
clearInterval(this.get('handle'));
}
}
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><\/script>
<script src="http://builds.emberjs.com/tags/v1.13.2/ember-template-compiler.js"><\/script>
<script src="http://builds.emberjs.com/tags/v1.13.2/ember.debug.js"><\/script>
</head>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
<\/script>
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each model as |item|}}
<li>{{item}}</li>
{{/each}}
</ul>
<h3>Initial Foos</h3>
{{#each initialFoos as |foo|}}
<p>
{{foo.a}} - {{foo.b}} - {{foo.c}} - {{foo.d}} - {{foo.observedFor}}
</p>
{{/each}}
<h3>Foos</h3>
{{#each foos as |foo|}}
<p>
{{foo.a}} - {{foo.b}} - {{foo.c}} - {{foo.d}} - {{foo.observedFor}}
</p>
{{/each}}
<h3>Foos Membership</h3>
{{#each foosMembership as |foo|}}
<p>
{{foo.a}} - {{foo.b}} - {{foo.c}} - {{foo.d}} - {{foo.observedFor}}
</p>
{{/each}}
<h3>Foos Updates</h3>
{{#each foosUpdates as |foo|}}
<p>
{{foo.a}} - {{foo.b}} - {{foo.c}} - {{foo.d}} - {{foo.observedFor}}
</p>
{{/each}}
<p><button {{action "observeInitialFoos"}}>Observe initial foos</button>
| <button {{action "unobserveInitialFoos"}}>Off</button></p>
<p><button {{action "observeFoos"}}>Observe foos</button>
| <button {{action "unobserveFoos"}}>Off</button></p>
<p><button {{action "addFoo"}}>Add a foo</button>
| <button {{action "setFoosA"}}>Set A</button>
| <button {{action "setFoosB"}}>Set B</button></p>
<p><button {{action "start"}}>Start</button> | <button {{action "stop"}}>Stop</button></p>
<\/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();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
var foo = { a: 1, b: 2 };
return Ember.keys(foo);
}
});
var DATA_A = [{a: 1}, {b: 2}, {c: 3}, {d: 4}];
var DATA_B = [{a: 10}, {b: 20}, {c: 30}, {d: 40}];
App.IndexController = Ember.Controller.extend({
init: function() {
this._super.apply(this, arguments);
},
next: 0,
handle: null,
initialFoos: Ember.A(DATA_A),
foos: Ember.computed('initialFoos', function() {
console.log("Computing foos...");
return this.get('initialFoos').map(function(aFoo) {
return Ember.$.extend(true, {}, aFoo, {observedFor: "root"});
});
}),
foosMembership: Ember.computed('initialFoos.[]', function() {
console.log("Computing foosMemberships...");
return this.get('initialFoos').map(function(aFoo) {
return Ember.$.extend(true, {}, aFoo, {observedFor: "membership"});
});
}),
foosUpdates: Ember.computed('initialFoos.@each', function() {
console.log("Computing foosUpdates...");
return this.get('initialFoos').map(function(aFoo) {
return Ember.$.extend(true, {}, aFoo, {observedFor: "updates"});
});
}),
incNext: function() {
this.set('next', this.get('next') + 1);
},
start: function() {
this.set('handle', setInterval(this.get('addFoo').bind(this), 1000));
},
addFoo: function() {
// Push changes the array but doesn't not notify observers!!
// this.get('initialFoos').push({ a: this.get('next')});
// Push object does both!!
this.get('initialFoos').pushObject({ a: this.get('next')});
this.incNext();
},
updateFoo: function() {
this.get('initialFoos').pushObject({ d: this.get('next')});
},
onInitialFoosChanged: function(_, key) {
console.log("InitialFoos changed: ", key);
},
autoOnInitialFoosChanged: function(_, key) {
console.log("Auto observed initial foos changed!", key);
}.observes('initialFoos'),
autoOnInitialFoosUpdated: function(_, key) {
console.log("Auto observed initial foos updated!", key);
}.observes('initialfoos.@each'),
autoOnInitialFoosAddedRemoved: function(_, key) {
console.log("Auto observed initial foos added/removed!", key);
}.observes('initialfoos.[]'),
onFoosChanged: function(_, key) {
console.log("Foos changed: ", key);
},
autoOnFoosChanged: function(_, key) {
console.log("Auto observed foos changed!", key);
}.observes('foos'),
autoOnFoosUpdated: function(_, key) {
console.log("Auto observed foos updated!", key);
}.observes('foos.@each'),
autoOnFoosAddedRemoved: function(_, key) {
console.log("Auto observed foos added/removed!", key);
}.observes('foos.[]'),
actions: {
observeInitialFoos: function() {
console.log("Observe IFs");
this.addObserver("initialFoos", this, this.onInitialFoosChanged);
},
observeFoos: function() {
console.log("Observe Fs");
this.addObserver("foos", this, this.onFoosChanged);
},
unobserveInitialFoos: function() {
console.log("UNObserve IFs");
this.removeObserver('initialFoos', this, this.onInitialFoosChanged);
},
unobserveFoos: function() {
console.log("UNObserve Fs");
this.removeObserver('foos', this, this.onFoosChanged);
},
addFoo: function() {
this.addFoo();
},
updateFoo: function() {
this.updateFoo();
},
setFoosA: function() {
this.set('initialFoos', Ember.A(DATA_A));
},
setFoosB: function() {
this.set('initialFoos', Ember.A(DATA_B));
},
start: function() {
this.start();
},
stop: function() {
clearInterval(this.get('handle'));
}
}
});</script></body>
</html>
Raw
jsbin.cifawefito.css
/* Put your CSS here */
html, body {
margin: 20px;
}
Raw
jsbin.cifawefito.js
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
var foo = { a: 1, b: 2 };
return Ember.keys(foo);
}
});
var DATA_A = [{a: 1}, {b: 2}, {c: 3}, {d: 4}];
var DATA_B = [{a: 10}, {b: 20}, {c: 30}, {d: 40}];
App.IndexController = Ember.Controller.extend({
init: function() {
this._super.apply(this, arguments);
},
next: 0,
handle: null,
initialFoos: Ember.A(DATA_A),
foos: Ember.computed('initialFoos', function() {
console.log("Computing foos...");
return this.get('initialFoos').map(function(aFoo) {
return Ember.$.extend(true, {}, aFoo, {observedFor: "root"});
});
}),
foosMembership: Ember.computed('initialFoos.[]', function() {
console.log("Computing foosMemberships...");
return this.get('initialFoos').map(function(aFoo) {
return Ember.$.extend(true, {}, aFoo, {observedFor: "membership"});
});
}),
foosUpdates: Ember.computed('initialFoos.@each', function() {
console.log("Computing foosUpdates...");
return this.get('initialFoos').map(function(aFoo) {
return Ember.$.extend(true, {}, aFoo, {observedFor: "updates"});
});
}),
incNext: function() {
this.set('next', this.get('next') + 1);
},
start: function() {
this.set('handle', setInterval(this.get('addFoo').bind(this), 1000));
},
addFoo: function() {
// Push changes the array but doesn't not notify observers!!
// this.get('initialFoos').push({ a: this.get('next')});
// Push object does both!!
this.get('initialFoos').pushObject({ a: this.get('next')});
this.incNext();
},
updateFoo: function() {
this.get('initialFoos').pushObject({ d: this.get('next')});
},
onInitialFoosChanged: function(_, key) {
console.log("InitialFoos changed: ", key);
},
autoOnInitialFoosChanged: function(_, key) {
console.log("Auto observed initial foos changed!", key);
}.observes('initialFoos'),
autoOnInitialFoosUpdated: function(_, key) {
console.log("Auto observed initial foos updated!", key);
}.observes('initialfoos.@each'),
autoOnInitialFoosAddedRemoved: function(_, key) {
console.log("Auto observed initial foos added/removed!", key);
}.observes('initialfoos.[]'),
onFoosChanged: function(_, key) {
console.log("Foos changed: ", key);
},
autoOnFoosChanged: function(_, key) {
console.log("Auto observed foos changed!", key);
}.observes('foos'),
autoOnFoosUpdated: function(_, key) {
console.log("Auto observed foos updated!", key);
}.observes('foos.@each'),
autoOnFoosAddedRemoved: function(_, key) {
console.log("Auto observed foos added/removed!", key);
}.observes('foos.[]'),
actions: {
observeInitialFoos: function() {
console.log("Observe IFs");
this.addObserver("initialFoos", this, this.onInitialFoosChanged);
},
observeFoos: function() {
console.log("Observe Fs");
this.addObserver("foos", this, this.onFoosChanged);
},
unobserveInitialFoos: function() {
console.log("UNObserve IFs");
this.removeObserver('initialFoos', this, this.onInitialFoosChanged);
},
unobserveFoos: function() {
console.log("UNObserve Fs");
this.removeObserver('foos', this, this.onFoosChanged);
},
addFoo: function() {
this.addFoo();
},
updateFoo: function() {
this.updateFoo();
},
setFoosA: function() {
this.set('initialFoos', Ember.A(DATA_A));
},
setFoosB: function() {
this.set('initialFoos', Ember.A(DATA_B));
},
start: function() {
this.start();
},
stop: function() {
clearInterval(this.get('handle'));
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment