Using components instead controllers in EmberJS v2

Question

I am beginner in EmberJS. I have made todomvc for ember v2 for learning Ember.

My implementation works without controller. I use components instead controllers. Because in documentation I see

Controllers are very much like components, so much so that in future versions of Ember, controllers will be replaced entirely with components.

But I think it is some ugly solution. Now I will explain why.

This is template for todo item component for my todolist 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>

It has acceptChanges and removeTodo events. And in js part of component I have handlers:

//app/components/todo-item.js
import Ember from 'ember';

export default Ember.Component.extend({

    updateTodoAction: 'updateTodo',
    deleteTodoAction: 'deleteTodo',

    isEditing: false,

    // some lines removed for brevity

    actions: {
      editTodo: function() {
        this.set('isEditing', true);
      },

      acceptChanges: function() {
        this.set('isEditing', false);
        this.sendAction('updateTodoAction', this.get('item'), this.get('item.title'));
      },

      removeTodo: function () {
        this.sendAction('deleteTodoAction', this.get('item'));
      }
    }
});

In js code of component I don't work with storage. I send this.sendAction(), and my route will handle it. And todos-route works with storage. Please look at todos route:

// 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
    }
});

When user clicks on remove button, it generates removeTodo action and it will handled in removeTodo() in js part of component. And then removeTodo() function calls this.sendAction('deleteTodoAction' ... ), which generates deleteTodo action. This action will handled in todos route in deleteTodo() method. I have todo.save() in this method.

The acceptChanges action works much like removeTodo, but it sets property isEditing = false before calling this.sendAction.

I have following chain for actions

component template -> component js -> route

I think for deleteTodo() will be better to exclude component js part. But how? In updateTodo() I need component js part, because I set value for isEditing property. But for calling route I need updateTodoAction property. And it is ugly for me. Can it work without updateTodoAction property? How?

Also I'd like to see any your comments about my solution (components instead controllers) or any part of my code.

Thank you, friends!

If you'd like a review of your code, codereview.stackexchange.com may be better, especially given the fact that your code is working. — Oren Hizkiya
Unfortunatly, codereview site has 8 followers for ember.js tag. Stackoverflow has 2.8K followers for this tag. — izumeroot

ahmed.hoban ahmed.hoban · Accepted Answer · 2015-12-23T19:34:08

You can set a property to the model instead of the component. For example set item.isEditing instead of isEditing. In your route action you have the item and can toggle the isEditing property. In the template change your if to {{if item.isEditing ...

Using components instead controllers in EmberJS v2

1 Answers