Commit 27abf868 authored by Sindre Sorhus's avatar Sindre Sorhus

Ember app - code style

parent d73610a5
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ember.js • TodoMVC</title> <title>ember.js • TodoMVC</title>
<link rel="stylesheet" href="components/todomvc-common/base.css"> <link rel="stylesheet" href="components/todomvc-common/base.css">
</head> </head>
<body> <body>
<script type="text/x-handlebars" data-template-name="todos"> <script type="text/x-handlebars" data-template-name="todos">
<section id="todoapp"> <section id="todoapp">
<header id="header"> <header id="header">
<h1>todos</h1> <h1>todos</h1>
{{view Ember.TextField id="new-todo" placeholder="What needs to be done?" {{view Ember.TextField id="new-todo" placeholder="What needs to be done?"
valueBinding="newTitle" action="createTodo"}} valueBinding="newTitle" action="createTodo"}}
</header> </header>
{{#if length}}
{{#if length}} <section id="main">
<section id="main"> <ul id="todo-list">
<ul id="todo-list"> {{#each filteredTodos itemController="todo"}}
{{#each filteredTodos itemController="todo"}} <li {{bindAttr class="isCompleted:completed isEditing:editing"}}>
<li {{bindAttr class="isCompleted:completed isEditing:editing"}}> {{#if isEditing}}
{{#if isEditing}} {{view Todos.EditTodoView todoBinding="this"}}
{{view Todos.EditTodoView todoBinding="this"}} {{else}}
{{else}} {{view Ember.Checkbox checkedBinding="isCompleted" class="toggle"}}
{{view Ember.Checkbox checkedBinding="isCompleted" class="toggle"}} <label {{action "editTodo" on="doubleClick"}}>{{title}}</label>
<label {{action "editTodo" on="doubleClick"}}>{{title}}</label> <button {{action "removeTodo"}} class="destroy"></button>
<button {{action "removeTodo"}} class="destroy"></button> {{/if}}
{{/if}} </li>
</li> {{/each}}
{{/each}} </ul>
</ul> {{view Ember.Checkbox id="toggle-all" checkedBinding="allAreDone"}}
{{view Ember.Checkbox id="toggle-all" checkedBinding="allAreDone"}} </section>
</section> <footer id="footer">
<span id="todo-count">{{{remainingFormatted}}}</span>
<footer id="footer"> <ul id="filters">
<span id="todo-count">{{{remainingFormatted}}}</span> <li>
<ul id="filters"> {{#linkTo todos.index activeClass="selected"}}All{{/linkTo}}
<li> </li>
{{#linkTo todos.index activeClass="selected"}}All{{/linkTo}} <li>
</li> {{#linkTo todos.active activeClass="selected"}}Active{{/linkTo}}
<li> </li>
{{#linkTo todos.active activeClass="selected"}}Active{{/linkTo}} <li>
</li> {{#linkTo todos.completed activeClass="selected"}}Completed{{/linkTo}}
<li> </li>
{{#linkTo todos.completed activeClass="selected"}}Completed{{/linkTo}} </ul>
</li> {{#if hasCompleted}}
</ul> <button id="clear-completed" {{action "clearCompleted"}} {{bindAttr class="buttonClass:hidden"}}>
Clear completed ({{completed}})
{{#if hasCompleted}} </button>
<button id="clear-completed" {{action "clearCompleted"}} {{bindAttr class="buttonClass:hidden"}}> {{/if}}
Clear completed ({{completed}}) </footer>
</button> {{/if}}
{{/if}} </section>
</footer> <footer id="info">
{{/if}} <p>Double-click to edit a todo</p>
</section> <p>
Created by
<footer id="info"> <a href="http://github.com/tomdale">Tom Dale</a>,
<p>Double-click to edit a todo</p> <a href="http://github.com/addyosmani">Addy Osmani</a>
<p> </p>
Created by <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
<a href="http://github.com/tomdale">Tom Dale</a>, </footer>
<a href="http://github.com/addyosmani">Addy Osmani</a> </script>
</p> <script src="components/todomvc-common/base.js"></script>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p> <script src="components/jquery/jquery.js"></script>
</footer> <script src="components/handlebars/handlebars.js"></script>
</script> <script src="components/ember/ember.js"></script>
<!-- TODO: change out with a component when a built one is available on Bower -->
<!-- /* Handlebars templates end */ --> <script src="js/libs/ember-data.js"></script>
<script src="components/todomvc-common/base.js"></script> <script src="components/ember-localstorage-adapter/localstorage_adapter.js"></script>
<script src="components/jquery/jquery.js"></script> <script src="js/app.js"></script>
<script src="components/handlebars/handlebars.js"></script> <script src="js/router.js"></script>
<script src="components/ember/ember.js"></script> <script src="js/models/todo.js"></script>
<!-- TODO: change out with a component when a built one is available on Bower --> <script src="js/models/store.js"></script>
<script src="js/libs/ember-data.js"></script> <script src="js/controllers/todos_controller.js"></script>
<script src="components/ember-localstorage-adapter/localstorage_adapter.js"></script> <script src="js/controllers/todo_controller.js"></script>
<script src="js/app.js"></script> <script src="js/views/todo_view.js"></script>
<script src="js/router.js"></script> <script src="js/views/edit_todo_view.js"></script>
<script src="js/models/todo.js"></script> </body>
<script src="js/models/store.js"></script>
<script src="js/controllers/todos_controller.js"></script>
<script src="js/controllers/todo_controller.js"></script>
<script src="js/views/todo_view.js"></script>
<script src="js/views/edit_todo_view.js"></script>
</body>
</html> </html>
/*global Ember*/ /*global Ember */
window.Todos = Ember.Application.create(); window.Todos = Ember.Application.create();
/*global Todos Ember*/ /*global Todos Ember */
'use strict'; 'use strict';
Todos.TodoController = Ember.ObjectController.extend({ Todos.TodoController = Ember.ObjectController.extend({
......
/*global Todos Ember*/ /*global Todos Ember */
'use strict'; 'use strict';
Todos.TodosController = Ember.ArrayController.extend({ Todos.TodosController = Ember.ArrayController.extend({
createTodo: function () { createTodo: function () {
// Get the todo title set by the "New Todo" text field // Get the todo title set by the "New Todo" text field
var title = this.get('newTitle'); var title = this.get('newTitle');
if (!title.trim()) { return; } if (!title.trim()) {
return;
}
// Create the new Todo model // Create the new Todo model
Todos.Todo.createRecord({ Todos.Todo.createRecord({
......
/*global Todos DS*/ /*global Todos DS */
'use strict'; 'use strict';
Todos.Store = DS.Store.extend({ Todos.Store = DS.Store.extend({
......
/*global Todos DS Ember*/ /*global Todos DS Ember */
'use strict'; 'use strict';
Todos.Todo = DS.Model.extend({ Todos.Todo = DS.Model.extend({
......
/*global Todos Ember*/ /*global Todos Ember */
'use strict'; 'use strict';
Todos.Router.map(function () { Todos.Router.map(function () {
...@@ -24,7 +24,9 @@ Todos.TodosIndexRoute = Ember.Route.extend({ ...@@ -24,7 +24,9 @@ Todos.TodosIndexRoute = Ember.Route.extend({
Todos.TodosActiveRoute = Ember.Route.extend({ Todos.TodosActiveRoute = Ember.Route.extend({
setupController: function () { setupController: function () {
var todos = Todos.Todo.filter(function (todo) { var todos = Todos.Todo.filter(function (todo) {
if (!todo.get('isCompleted')) { return true; } if (!todo.get('isCompleted')) {
return true;
}
}); });
this.controllerFor('todos').set('filteredTodos', todos); this.controllerFor('todos').set('filteredTodos', todos);
...@@ -34,7 +36,9 @@ Todos.TodosActiveRoute = Ember.Route.extend({ ...@@ -34,7 +36,9 @@ Todos.TodosActiveRoute = Ember.Route.extend({
Todos.TodosCompletedRoute = Ember.Route.extend({ Todos.TodosCompletedRoute = Ember.Route.extend({
setupController: function () { setupController: function () {
var todos = Todos.Todo.filter(function (todo) { var todos = Todos.Todo.filter(function (todo) {
if (todo.get('isCompleted')) { return true; } if (todo.get('isCompleted')) {
return true;
}
}); });
this.controllerFor('todos').set('filteredTodos', todos); this.controllerFor('todos').set('filteredTodos', todos);
......
/*global Todos Ember*/ /*global Todos Ember */
'use strict'; 'use strict';
Todos.EditTodoView = Ember.TextField.extend({ Todos.EditTodoView = Ember.TextField.extend({
......
/*global Todos Ember*/ /*global Todos Ember */
'use strict'; 'use strict';
Todos.TodoView = Ember.View.extend({ Todos.TodoView = Ember.View.extend({
tagName: 'li', tagName: 'li',
classNameBindings: ['todo.isCompleted:completed', 'isEditing:editing'], classNameBindings: [
'todo.isCompleted:completed',
'isEditing:editing'
],
doubleClick: function () { doubleClick: function () {
this.set('isEditing', true); this.set('isEditing', true);
} }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment