Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Emberjs Sample
console.log('hi');
window.Todos = Ember.Application.create();
Todos.Todo = Ember.Object.extend({
title: null,
isDone: false
});
Todos.todosController = Ember.ArrayController.create({
content:[],
createTodo: function(title){
var todo = Todos.Todo.create({ title: title });
this.pushObject(todo);
},
remaining: function() {
return this.filterProperty('isDone', false).get('length');
}.property('@each.isDone'),
clearCompletedTodos: function() {
this.filterProperty('isDone', true).forEach(this.removeObject, this);
},
allAreDone: function(key, value) {
if (value !== undefined) {
this.setEach('isDone', value);
return value;
} else {
return !!this.get('length') && this.everyProperty('isDone', true);
}
}.property('@each.isDone')
});
Todos.CreateTodoView = Ember.TextField.extend({
insertNewline: function() {
var value = this.get('value');
if (value) {
Todos.todosController.createTodo(value);
this.set('value', '');
}
}
});
Todos.StatsView = Ember.View.extend({
remainingBinding: 'Todos.todosController.remaining',
remainingString: function(){
var remaining = this.get('remaining');
return remaining + (remaining == 1 ? " item" : " items");
}.property('remaining')
});
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/style.css?v=2">
<link rel="stylesheet" href="css/todos.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1>Todos</h1>
<!-- The missing protocol means that it will match the current protocol, either http or https. If running locally, we use the local jQuery. -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/libs/handlebars-1.0.0.beta.6.js"></script>
<script src="js/libs/ember-1.0.pre.js"></script>
<script src="js/app.js"></script>
<script type="text/x-handlebars">
{{view Todos.CreateTodoView id="new-todo"
placeholder="What needs to be done?"}}
{{#view Todos.StatsView id="stats"}}
{{#view Ember.Button classBinding="isActive"
target="Todos.todosController"
action="clearCompletedTodos"}}
Clear Completed Todos
{{/view}}
{{view.remainingString}} remaining
{{/view}}
{{view Ember.Checkbox class="mark-all-done"
title="Mark All as Done"
checkedBinding="Todos.todosController.allAreDone"}}
{{#collection contentBinding="Todos.todosController" tagName="ul" itemClassNameBinding="view.content.isDone"}}
<label>
{{view Ember.Checkbox checkedBinding="view.content.isDone"}}
{{view.content.title}}
</label>
{{/collection}}
</script>
</body>
</html>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle; }
q, blockquote {
quotes: none; }
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none; }
a img {
border: none; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle; }
q, blockquote {
quotes: none; }
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none; }
a img {
border: none; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1;
font-family: "Lucida Grande", sans-serif;
font-size: 13px; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
/* App CSS */
body, html {
color: #777;
background-color: #F2F4F5; }
.ember-view {
position: relative;
overflow: visible; }
body {
-moz-box-shadow: rgba(0, 0, 0, 0.6) 0 0 1px;
-webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 0 1px;
-o-box-shadow: rgba(0, 0, 0, 0.6) 0 0 1px;
box-shadow: rgba(0, 0, 0, 0.6) 0 0 1px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
position: absolute;
width: 600px;
left: 50%;
margin-top: 38px;
border: 1px solid #bbbbbb;
margin-left: -300px;
background-color: #fff;
padding: 40px 10px 10px; }
body .mark-all-done label {
margin-left: 5px;
font-weight: bold; }
body #stats {
overflow: hidden;
width: 100%;
padding: 5px 10px;
margin: 10px -10px;
background-color: #eee;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
line-height: 25px; }
body #stats .remaining {
float: left; }
body #stats .ember-button {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #f9f9f9), color-stop(34%, #dddddd), color-stop(67%, #f2f2f2), color-stop(100%, #f7f7f7));
background-image: -webkit-linear-gradient(#f9f9f9 1%, #dddddd, #f2f2f2, #f7f7f7);
background-image: -moz-linear-gradient(#f9f9f9 1%, #dddddd, #f2f2f2, #f7f7f7);
background-image: -o-linear-gradient(#f9f9f9 1%, #dddddd, #f2f2f2, #f7f7f7);
background-image: linear-gradient(#f9f9f9 1%, #dddddd, #f2f2f2, #f7f7f7);
border: 1px solid #828282;
color: #000;
float: right;
padding: 5px; }
body #stats .ember-button:hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #ffffff), color-stop(34%, #e2e2e2), color-stop(67%, #f7f7f7), color-stop(100%, #fcfcfc));
background-image: -webkit-linear-gradient(#ffffff 1%, #e2e2e2, #f7f7f7, #fcfcfc);
background-image: -moz-linear-gradient(#ffffff 1%, #e2e2e2, #f7f7f7, #fcfcfc);
background-image: -o-linear-gradient(#ffffff 1%, #e2e2e2, #f7f7f7, #fcfcfc);
background-image: linear-gradient(#ffffff 1%, #e2e2e2, #f7f7f7, #fcfcfc); }
body #stats .ember-button.is-active {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #efefef), color-stop(34%, #d3d3d3), color-stop(67%, #e8e8e8), color-stop(100%, #ededed));
background-image: -webkit-linear-gradient(#efefef 1%, #d3d3d3, #e8e8e8, #ededed);
background-image: -moz-linear-gradient(#efefef 1%, #d3d3d3, #e8e8e8, #ededed);
background-image: -o-linear-gradient(#efefef 1%, #d3d3d3, #e8e8e8, #ededed);
background-image: linear-gradient(#efefef 1%, #d3d3d3, #e8e8e8, #ededed); }
body input[type='text'] {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.6);
-o-box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.6);
color: #999;
background-color: #f0f0f0;
width: 588px;
font-size: 30px;
font-family: Helvetica, sans-serif;
padding: 5px;
border: 1px solid #bbbbbb;
font-weight: 500; }
body input[type='text']::-webkit-input-placeholder {
color: #aaa; }
body h1 {
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
-o-border-top-left-radius: 8px;
-ms-border-top-left-radius: 8px;
-khtml-border-top-left-radius: 8px;
border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
-o-border-top-right-radius: 8px;
-ms-border-top-right-radius: 8px;
-khtml-border-top-right-radius: 8px;
border-top-right-radius: 8px;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(49%, #f4f4f4), color-stop(51%, #ededed), color-stop(100%, #dedede));
background-image: -webkit-linear-gradient(#ffffff, #f4f4f4 49%, #ededed 51%, #dedede);
background-image: -moz-linear-gradient(#ffffff, #f4f4f4 49%, #ededed 51%, #dedede);
background-image: -o-linear-gradient(#ffffff, #f4f4f4 49%, #ededed 51%, #dedede);
background-image: linear-gradient(#ffffff, #f4f4f4 49%, #ededed 51%, #dedede);
text-shadow: white 0 1px 1px;
font-size: 15px;
position: absolute;
width: 600px;
height: 20px;
color: #53565e;
top: 0;
left: 0;
padding: 5px 10px;
border-bottom: 1px solid #bbbbbb; }
body .ember-checkbox input[type="checkbox"] {
margin-right: 7px; }
body ul {
margin: 10px 0 2px 0; }
body ul li {
padding: 5px; }
body ul li.is-done {
color: #B7B7B7;
text-decoration: line-through; }
body ul li:nth-child(odd) {
background-color: #F7F7F7; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment