这些操作如何在这个 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 的出口中加载的，对吗？

这是我的应用程序/模板/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. 当我在输入字段中按回车键时，它会调用 submitTodo 对吗？它首先看起来在哪里？它是否在组件的 js 文件中查找 app/components/todo-input.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({ 模型（） { 返回 this.store.findAll('todo'); }, 行动：{ createTodo(newTitle) { this.store.createRecord('todo', { 标题：新标题， 完成：假 }）。保存（）; } } });

我主要对这一行的操作感到困惑：

{{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

当我在输入字段中按回车键时，它会调用 submitTodo 对吗？

是的，因为您已指定此操作应在输入事件时触发。 More info can be found here.

它首先看起来在哪里？它是否在组件的 js 文件中查找 哪个是 app/components/todo-input.js 对吗？

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

什么参数被传递给 submitTodo 方法？

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

这是什么线：

this.sendAction('action', newTitle);

它触发一个作为参数（在本例中为 createTodo）传递给组件的操作，以 newTitle 作为参数。

我应该在哪里定义这个“createTodo”操作？是否应该放入 路线/todos.js ？

Controller 会更适合您的操作，因此您应该将 createTodo 操作放入 controllers/todos.js。

createTodo 操作什么时候会被触发？

看看这个：

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