如何在数组控制器中声明项目控制器 - ember.js

Question

我正在尝试编写Todo应用程序(使用ember-cli).当我在todos资源下添加活动和完整路由时,我的项目控制器停止工作.在我使用Array控制器中的itemController设置我的Object控制器之前.

router.js

import Ember from 'ember';

var Router = Ember.Router.extend({
    location: TodoMVCENV.locationType });

Router.map(function() {
    this.resource('todos', { path: '/' }, function() {
        this.route('active');
        this.route('complete');
    }); 
});

export default Router;

控制器/ todos.js

import Ember from 'ember';

var TodosController = Ember.ArrayController.extend({
    actions: {
        createTodo: function() {
            // Get the todo title set by the "New Todo" text field
            var title = this.get('newTitle');

            // Create the new Todo model
            var todo = this.store.createRecord('todo', {
                title: title,
                isCompleted: false
            });

            // Clear the "New Todo" text field
            this.set('newTitle', '');

            // Save the new model
            todo.save();
        }   
    },

    itemController: 'todo',

    allAreDone: function(key, value) {
        if (value === undefined) {
            return this.get('length') > 0 && this.everyProperty('isCompleted', true);
        }
        else {
            this.setEach('isCompleted', value);
            this.invoke('save');
            return value;
        }
    }.property('@each.isCompleted'),

    hasCompleted: function() {
        return this.get('completed') > 0;
    }.property('completed'),

    completed: function() {
        return this.filterBy('isCompleted', true).get('length');
    }.property('@each.isCompleted'),

    remaining: function() {
        return this.filterBy('isCompleted', false).get('length');
    }.property('@each.isCompleted'),

    inflection: function() {
        var remaining = this.get('remaining');
        return (remaining === 1) ? 'item' : 'items';
    }.property('remaining')
});

export default TodosController;

控制器/ todo.js

import Ember from 'ember';

var TodoController = Ember.ObjectController.extend({
    actions: {
        editTodo: function() {
            this.set('isEditing', true);
        },
        acceptChanges: function() {
            // Remove is editing property
            this.set('isEditing', false);

            // If the todo is empty, delete it
            // otherwise save it with the new title
            if(Ember.isEmpty(this.get('model.title'))) {
                this.send('removeTodo');
            } else {
                this.get('model').save();
            }
        },
        removeTodo: function() {
            var todo = this.get('model');
            todo.deleteRecord();
            todo.save();
        }
    }
});

export default TodoController;

在我添加嵌套路由之前,todo.js中的操作有效,现在当我尝试todo.js中的任何操作时,我在控制台中得到以下内容:

Uncaught Error: Nothing handled the action 'editTodo'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.

从评论中添加以下模板....

模板/ todos.hbs

{{input type="text" id="new-todo" placeholder="What needs to be done?" 
    value=newTitle action="createTodo"}}

{{outlet}}

<footer id="footer">
    <span id="todo-count">
        <strong>{{remaining}}</strong> {{inflection}} 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.complete" activeClass="selected"}}Active{{/link-to}}
        </li>
    </ul>

    <button id="clear-completed">
        Clear completed (1)
    </button>
</footer>

模板/待办事项/ index.hbs

<section id="main">
    <ul id="todo-list">
        {{#each}}
            <li {{bind-attr class="isCompleted:completed isEditing:editing"}}>
                {{#if isEditing}}
                    {{input type="text" class="edit" value=title focus-out="acceptChanges"
                        insert-newline="acceptChanges"}}
                {{else}}
                    {{input type="checkbox" checked=isCompleted class="toggle"}}
                    <label {{action "editTodo" on="doubleClick"}}>{{title}}</label>
                    <button {{action "removeTodo"}} class="destroy"></button>
                {{/if}}
            </li>
        {{/each}}
    </ul>
</section>

Answer 1

将模板更改为:

{{#each todo in content itemController="todo"}}
    {{#with todo}}
        ...
    {{/with}}
{{/each}}

由于Ember 1.6.0中的更新以及此处引用的范围更改,我添加了{{with}}块.

我喜欢为这些模板添加更多标记,以便其他开发人员能够快速识别javascript中的内容,而无需打开Route的控制器.

如果您决定在阵列控制器上设置一些#sortProperties,也可以将"content"替换为"arrangeContent".