Skip to content

Instantly share code, notes, and snippets.

@tatsuosakurai

tatsuosakurai/app.js

Created October 8, 2012 06:23
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 tatsuosakurai/3851006 to your computer and use it in GitHub Desktop.
Save tatsuosakurai/3851006 to your computer and use it in GitHub Desktop.
Download ZIP
Emberjs Sample
Raw
app.js
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')
});
Raw
index.html
<!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>
Raw
todos.css
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