How do these actions resolve and bubble in this Ember.js app?

Question

Here is my basic app in Ember.js:

This is my app/router.js:

import Ember from 'ember';
import config from './config/environment';

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

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

export default Router;

So when I hit the root path or '/', my application.hbs loads first, then my app/templates/todos.hbs, then my app/templates/todos/index.hbs right? The app/templates/todos/index.hbs gets loaded inside the outlet of the todos.hbs right?

This is my app/templates/todos.hbs:

<p>
  this is the app/templates/todos.hbs.
</p>
{{todo-input action="createTodo"}}
{{#todo-list todos=model}}
    {{outlet}}
{{/todo-list}}

So my todo-input component has an action called 'createTodo'. When does this get called?

This is my todo-input component handlebars template:

<p>
  this is the todo-input.hbs component. It gets called inside todos.hbs
</p>
{{input type="text" id="new-todo" placeholder="What needs to be done?"
    value=newTitle enter="submitTodo"}}

Questions:

1. When I hit enter in the input field, it calls submitTodo right? Where does it look first? Does it look in the component's js file which is app/components/todo-input.js right? This is that code:

   import Ember from 'ember';
   
   export default Ember.Component.extend({
     actions: {
       submitTodo(newTitle) {
         if (newTitle) {
           this.sendAction('action', newTitle);
         }
             this.set('newTitle','');
       }
     }
   });
   

2. What argument gets passed to the submitTodo method?

3. What is this line:

   this.sendAction('action', newTitle);  
   

4. Where should I define this 'createTodo' action? Should it be put in the routes/todos.js ?

   import Ember from 'ember';

   export default Ember.Route.extend({ model() { return this.store.findAll('todo'); }, actions: { createTodo(newTitle) { this.store.createRecord('todo', { title: newTitle, complete: false }).save(); } } });

I am mainly confused as to how the action in this line:

{{todo-input action="createTodo"}}

relates to the enter attribute in the todo-input component template:

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

When does the action createTodo even get fired?

Answer 1

When I hit enter in the input field, it calls submitTodo right?

Yes, because you've specified that this action should fire on enter event. More info can be found here.

Where does it look first? Does it look in the component's js file which is app/components/todo-input.js right?

Yes, it does look in component's javascript code for appropriate action.

What argument gets passed to the submitTodo method?

Input value is passed to to submitTodo action as first and only argument.

What is this line:

this.sendAction('action', newTitle);

It fires an action passed as parameter (in this case createTodo) to component with newTitle as argument.

Where should I define this 'createTodo' action? Should it be put in the routes/todos.js ?

Controller would be better place for your action, so you should put createTodo action in controllers/todos.js.

When does the action createTodo even get fired?

Check this out:

1. User presses enter when he has input focused
2. Input helper fires action attached to enter event - which is submitTodo
3. submitTodo gets called because it's located in component's actions set
4. submitTodo calls action passed to todo-input component with this.sendAction() - this action is createTodo