Skip to content

T
todomvc
Commit e2380422 authored by Trek Glowacki's avatar Trek Glowacki Committed by Sindre Sorhus
Browse files
Options

Ember app improvements 

Some slightly stylistic changes more recent versions of Ember let's us do.

A combination of children route getting their parent model by default and being able to supply a route's template name let's us use {{outlet}} instead of mutating the state on a shared controller object.

Automatic component lookup let's us remove the explicit registration of the todo input. We can also re-use the component for both new todos and editing todos.

Closes #943
parent 67072a72
Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 69 deletions
architecture-examples/emberjs/index.html
View file @ e2380422
......@@ -6,49 +6,56 @@
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<script type="text/x-handlebars" data-template-name="todo-list">
{{#if length}}
<section id="main">
{{#if canToggle}}
{{input type="checkbox" id="toggle-all" checked=allTodos.allAreDone}}
{{/if}}
<ul id="todo-list">
{{#each}}
<li {{bind-attr class="isCompleted:completed isEditing:editing"}}>
{{#if isEditing}}
{{todo-input type="text" class="edit" value=bufferedTitle focus-out="doneEditing" insert-newline="doneEditing" escape-press="cancelEditing"}}
{{else}}
{{input type="checkbox" class="toggle" checked=isCompleted}}
<label {{action "editTodo" on="doubleClick"}}>{{title}}</label>
<button {{action "removeTodo"}} class="destroy"></button>
{{/if}}
</li>
{{/each}}
</ul>
</section>
{{/if}}
</script>
<script type="text/x-handlebars" data-template-name="todos">
<section id="todoapp">
<header id="header">
<h1>todos</h1>
{{input id="new-todo" type="text" value=newTitle action="createTodo" placeholder="What needs to be done?"}}
{{todo-input id="new-todo" type="text" value=newTitle action="createTodo" placeholder="What needs to be done?"}}
</header>
{{#if length}}
<section id="main">
<ul id="todo-list">
{{#each filteredTodos itemController="todo"}}
<li {{bind-attr class="isCompleted:completed isEditing:editing"}}>
{{#if isEditing}}
{{edit-todo class="edit" value=bufferedTitle focus-out="doneEditing" insert-newline="doneEditing" escape-press="cancelEditing"}}
{{else}}
{{input type="checkbox" class="toggle" checked=isCompleted}}
<label {{action "editTodo" on="doubleClick"}}>{{title}}</label>
<button {{action "removeTodo"}} class="destroy"></button>
{{/if}}
</li>
{{/each}}
</ul>
{{input type="checkbox" id="toggle-all" checked=allAreDone}}
</section>
<footer id="footer">
<span id="todo-count"><strong>{{remaining.length}}</strong> {{pluralize 'item' remaining.length}} left</span>
<ul id="filters">
<li>
{{#link-to "todos.index" activeClass="selected"}}All{{/link-to}}
</li>
<li>
{{#link-to "todos.active" activeClass="selected"}}Active{{/link-to}}
</li>
<li>
{{#link-to "todos.completed" activeClass="selected"}}Completed{{/link-to}}
</li>
</ul>
{{#if completed.length}}
<button id="clear-completed" {{action "clearCompleted"}}>
Clear completed ({{completed.length}})
</button>
{{/if}}
</footer>
{{/if}}
{{outlet}}
{{#if length}}
<footer id="footer">
<span id="todo-count"><strong>{{remaining.length}}</strong> {{pluralize 'item' remaining.length}} left</span>
<ul id="filters">
<li>
{{#link-to "todos.index" activeClass="selected"}}All{{/link-to}}
</li>
<li>
{{#link-to "todos.active" activeClass="selected"}}Active{{/link-to}}
</li>
<li>
{{#link-to "todos.completed" activeClass="selected"}}Completed{{/link-to}}
</li>
</ul>
{{#if completed.length}}
<button id="clear-completed" {{action "clearCompleted"}}>
Clear completed ({{completed.length}})
</button>
{{/if}}
</footer>
{{/if}}
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
......@@ -74,9 +81,9 @@
<script src="js/router.js"></script>
<script src="js/models/todo.js"></script>
<script src="js/controllers/todos_controller.js"></script>
<script src="js/controllers/todos_list_controller.js"></script>
<script src="js/controllers/todo_controller.js"></script>
<script src="js/views/edit_todo_view.js"></script>
<script src="js/views/todos_view.js"></script>
<script src="js/views/todo_input_component.js"></script>
<script src="js/helpers/pluralize.js"></script>
</body>
</html>
architecture-examples/emberjs/js/controllers/todos_controller.js
View file @ e2380422
......@@ -33,8 +33,8 @@
/* properties */
remaining: Ember.computed.filterBy('content', 'isCompleted', false),
completed: Ember.computed.filterBy('content', 'isCompleted', true),
remaining: Ember.computed.filterBy('model', 'isCompleted', false),
completed: Ember.computed.filterBy('model', 'isCompleted', true),
allAreDone: function (key, value) {
if (value !== undefined) {
......
architecture-examples/emberjs/js/controllers/todos_list_controller.js 0 → 100644
View file @ e2380422
/*global Todos, Ember */
(function () {
'use strict';
Todos.TodosListController = Ember.ArrayController.extend({
needs: ['todos'],
allTodos: Ember.computed.alias('controllers.todos'),
itemController: 'todo',
canToggle: function () {
var anyTodos = this.get('allTodos.length');
var isEditing = this.isAny('isEditing');
return anyTodos && !isEditing;
}.property('allTodos.length', '@each.isEditing')
});
})();
architecture-examples/emberjs/js/router.js
View file @ e2380422
......@@ -15,29 +15,24 @@
}
});
Todos.TodosIndexRoute = Ember.Route.extend({
setupController: function () {
this.controllerFor('todos').set('filteredTodos', this.modelFor('todos'));
}
Todos.TodosIndexRoute = Todos.TodosRoute.extend({
templateName: 'todo-list',
controllerName: 'todos-list'
});
Todos.TodosActiveRoute = Ember.Route.extend({
setupController: function () {
var todos = this.store.filter('todo', function (todo) {
Todos.TodosActiveRoute = Todos.TodosIndexRoute.extend({
model: function () {
return this.store.filter('todo', function (todo) {
return !todo.get('isCompleted');
});
this.controllerFor('todos').set('filteredTodos', todos);
}
});
Todos.TodosCompletedRoute = Ember.Route.extend({
setupController: function () {
var todos = this.store.filter('todo', function (todo) {
Todos.TodosCompletedRoute = Todos.TodosIndexRoute.extend({
model: function () {
return this.store.filter('todo', function (todo) {
return todo.get('isCompleted');
});
this.controllerFor('todos').set('filteredTodos', todos);
}
});
})();
architecture-examples/emberjs/js/views/edit_todo_view.js → architecture-examples/emberjs/js/views/todo_input_component.js
View file @ e2380422
......@@ -2,13 +2,11 @@
(function () {
'use strict';
Todos.EditTodoView = Ember.TextField.extend({
Todos.TodoInputComponent = Ember.TextField.extend({
focusOnInsert: function () {
// Re-set input value to get rid of a reduntant text selection
this.$().val(this.$().val());
this.$().focus();
}.on('didInsertElement')
});
Ember.Handlebars.helper('edit-todo', Todos.EditTodoView);
})();
architecture-examples/emberjs/js/views/todos_view.js deleted 100644 → 0
View file @ 67072a72
/*global Todos, Ember */
(function () {
'use strict';
Todos.TodosView = Ember.View.extend({
focusInput: function () {
this.$('#new-todo').focus();
}.on('didInsertElement')
});
})();
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7