这些动作如何解决并在此Ember.js应用程序中冒泡？

Question

这是我在Ember.js中的基本应用程序：

这是我的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;

因此，当我点击根路径或“ /”时，首先加载application.hbs，然后加载我的app / templates / todos.hbs，然后加载我的app / templates / todos / index.hbs，对吗？ app / templates / todos / index.hbs被加载到todos.hbs的出口内吧？

这是我的app / templates / todos.hbs：

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

因此，我的todo-input组件具有一个称为“ createTodo”的动作。 什么时候叫这个？

这是我的todo-input组件把手模板：

<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"}}

问题 ：

1. 当我在输入字段中按Enter键时，它会调用SubmitTodo对吗？ 首先看哪里？ 它是否在正确的app / components / todo-input.js组件的js文件中查找？ 这是该代码：

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

2. 什么参数传递给submitTodo方法？

3. 这行是什么：

    this.sendAction('action', newTitle); 

4. 我应该在哪里定义这个“ createTodo”动作？ 是否应该将其放在routes / todos.js中？

   从'ember'导入Ember；

   导出默认的Ember.Route.extend（{model（）{return this.store.findAll（'todo'）;}，操作：{createTodo（newTitle）{this.store.createRecord（'todo'，{title：newTitle， complete：false}）。save（）;}}}）;

对于这一行的操作方式，我主要感到困惑：

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

与todo-input组件模板中的enter属性有关：

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

动作createTodo何时被解雇？

Answer 1

当我在输入字段中按Enter键时，它会调用SubmitTodo对吗？

是的，因为您指定了该操作应在输入事件时触发。 更多信息可以在这里找到。

首先看哪里？ 它是否在正确的app / components / todo-input.js组件的js文件中查找？

是的，它会在组件的javascript代码中查找适当的操作。

什么参数传递给submitTodo方法？

输入值作为第一个也是唯一的参数传递给submitTodo操作。

这行是什么：

this.sendAction('action', newTitle);

它以newTitle作为参数触发作为参数传递的操作（在本例中为createTodo ）。

我应该在哪里定义这个“ createTodo”动作？ 是否应该将其放在routes / todos.js中？

控制器将是您执行操作的最佳场所，因此您应将createTodo操作放入controllers/todos.js 。

动作createTodo何时被解雇？

看一下这个：

1. 用户输入焦点后按Enter
2. 输入助手触发附加到输入事件的动作-这是submitTodo
3. 由于submitTodo位于组件的操作集中，因此它被调用
4. submitTodo使用this.sendAction()调用传递给todo-input组件的操作-此操作是createTodo