1
我實施了一個工作待辦事宜應用程序，它將最新的內部版本的「查看上下文更改」（click）考慮在內。待辦事項應用程序：查看上下文更改（latest-ember）
它工作正常，但我不知道是否有一個更容易（更好/更短）的解決方案，這一點：
http://jsfiddle.net/KBtwG/
（我也得到了一些惱人的未被捕獲的錯誤/警告拋出..）
模板：
<script type="text/x-handlebars">
{{view Todos.CreateTodoView placeholder="What has to be done?"}}
{{#collection contentBinding="Todos.todosController"}}
<label>
{{view Em.Checkbox labelBinding="content.title" checkedBinding="view.content.isDone"}}
{{view.content.title}}
</label>
{{/collection}}
<br /><br />
<label>
{{view Em.Checkbox class="mark-all-done" title="Mark All as Done" checkedBinding="Todos.todosController.allAreDone"}}
Mark All as Done
</label>
{{#view Ember.Button target="Todos.todosController" action="clearCompletedTodos"}}
Clear
{{/view}}
{{#view Todos.StatsView}}
Remaining: {{view.remainingString}}
{{/view}}
代碼：
/*************************** Application ********************/
Todos = Em.Application.create();
Todos.initialize();
/*************************** Models *************************/
Todos.Todo = Em.Object.extend({
title: null,
isDone: false
});
/*************************** Controllers ********************/
Todos.todosController = Ember.ArrayProxy.create({
content: [],
createTodo: function(title) {
var todo = Todos.Todo.create({
title: title
});
this.pushObject(todo);
},
clearCompletedTodos: function() {
this.filterProperty('isDone', true).forEach(this.removeObject, this);
},
remaining: function() {
return this.filterProperty('isDone', false).get('length');
}.property('@each.isDone'),
isEmpty: function() {
return this.get('length') === 0;
}.property('length'),
allAreDone: function(key, value) {
if (arguments.length === 2) {
this.setEach('isDone', value);
return value;
} else {
return !this.get('isEmpty') && this.everyProperty('isDone', true);
}
}.property('@each.isDone')
});
/*************************** Views **************************/
Todos.CreateTodoView = Em.TextField.extend({
insertNewline: function() {
var value = this.get('value');
if (value) {
Todos.todosController.createTodo(value);
this.set('value', '');
}
}
});
Todos.StatsView = Em.View.extend({
remainingBinding: 'Todos.todosController.remaining',
remainingString: function() {
var remaining = this.get('remaining');
return remaining + (remaining === 1 ? " item" : " items");
}.property('remaining')
});