Javascript 在EmberJS v2中使用组件而不是控制器

我是EmberJS的初学者。我为学习余烬而努力

我的实现在没有控制器的情况下工作。我使用组件代替控制器。因为在我看来

控制器与组件非常相似，因此在未来版本的Ember中，控制器将完全替换为组件

但我认为这是一个丑陋的解决方案。现在我将解释原因

这是我的todolist的todo项组件模板 app/templates/components/todo-item.hbs：

<li class="{{if isCompleted 'completed'}} {{if isEditing 'editing'}}">
    {{#if isEditing}}
        {{input-focused class="edit" value=item.title focus-out="acceptChanges" insert-newline="acceptChanges"}}
    {{else}}
      {{input type="checkbox" checked=isCompleted class="toggle"}}
      <label {{action "editTodo" on="doubleClick"}}>{{item.title}}</label><button {{action "removeTodo"}} class="destroy"></button>
    {{/if}}
</li>

在组件的js代码中，我不使用存储。我发送这个.sendAction（），我的路由将处理它。todos路由与存储一起工作。请看todos路线：

// app/routes/todos.js
import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        return this.store.findAll('todo');
    },

    actions: {
        // some lines removed from here for brevity

        updateTodo: function(todo, title) {
            if (Ember.isEmpty(title)) {
                this.send('deleteTodo', todo);
            } else {
                todo.save();
            }
        },

        deleteTodo: function(todo) {
            todo.deleteRecord();
            todo.save();
        },

       // some lines removed from here for brevity
    }
});

当用户单击remove按钮时，它将生成removeTodo操作，并将在组件js部分的removeTodo（）中处理。 然后removeTodo（）函数调用这个.sendAction（'deleteTodoAction'…），它将生成deleteTodo操作。此操作将在deleteTodo（）方法中的todos路由中处理。我必须在这个方法中执行todo.save（）

acceptChanges操作的工作原理与removeTodo非常相似，但它在调用this.sendAction之前设置了属性IsEdit=false

我有以下行动链

组件模板->组件js->路由

我认为对于deleteTodo（），最好排除组件js部分。但是怎么做呢？ 在updateTodo（）中，我需要组件js部件，因为我为isEditing属性设置了值。但对于调用路由，我需要updateTodoAction属性。这对我来说很难看。没有UpdateToAction属性它能工作吗？怎么做

此外，我希望看到您对我的解决方案（组件而不是控制器）或我的代码的任何部分的任何评论

---

谢谢你们，朋友们

可以为模型而不是组件设置属性。例如，设置item.isEditing而不是isEditing。在路由操作中，您拥有该项，并且可以切换iEdit属性。在模板中，将if更改为{{if item.isEditing…

如果您想查看您的代码，可能会更好，尤其是考虑到您的代码正在工作的事实。不幸的是，codereview站点有8个ember.js标记的跟随者。Stackoverflow有2.8K个此标记的跟随者。您好！我认为iEdit对于模型来说是一个不好的地方，因为此属性用于显示要执行的GUI状态在模型中，我们必须具有将存储到服务器的属性。

// app/routes/todos.js
import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        return this.store.findAll('todo');
    },

    actions: {
        // some lines removed from here for brevity

        updateTodo: function(todo, title) {
            if (Ember.isEmpty(title)) {
                this.send('deleteTodo', todo);
            } else {
                todo.save();
            }
        },

        deleteTodo: function(todo) {
            todo.deleteRecord();
            todo.save();
        },

       // some lines removed from here for brevity
    }
});