1

最新の ember バージョンの「ビュー コンテキストの変更」(クリック) を考慮した作業用の todo アプリを実装しました。

それは正常に動作しますが、これに対するより簡単な（より良い/より短い）解決策があったのだろうか：
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}}

</p>

コード：

/*************************** 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')
});​
4

1 に答える 1

0

あなたのフィドルが機能するように更新しました：http://jsfiddle.net/KBtwG/2/

最新の Ember を使用しているため、ルーターなど、利用できる多くの新しい機能があることに注意してください。投稿したコードは、Ember の最新機能を統合すると、より見栄えがよくなります。

于 2012-09-19T14:37:00.980 に答える