Question

我实施了一个有效的待办事项应用程序，该应用程序考虑了最新余烬版本的“查看上下文更改”（click）。

它工作正常，但我想知道是否有一个更容易（更好/更短）的解决方案：
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')
});

Answer 1

我已将您的小提琴更新为：http://jsfiddle.net/KBtwG/2/

请注意，由于您最近使用的是Ember，因此您可以利用许多新功能，例如路由器。一旦您整合了Ember的最新功能，您发布的代码看起来会更好。

todo app：查看上下文更改（latest-ember）

1 个答案: