从组件到路由的动作不再冒泡(Ember 1.13)

Actions not bubbling up from Component to Route (Ember 1.13)

本文关键字：Ember 不再 组件 路由      更新时间：2023-09-26

对于CRUD中的每一行，我都有一个item-row.js组件和一个触发"addNewItem"的按钮，因为我需要做一些额外的处理。

嗯，动作从来没有气泡到路由，所以我相信我做错了什么。烬向导会告诉我要做什么，所以我完全迷失在这里。我错过什么了吗?

代码:

模板是这样的:

// my-template.hbs
{{#each model as |item|}}
    {{#item-row
         id = item.id
         text = item.text
    }}
        {{item.title}}
    {{/item-row}}
{{/each}}

在该组件的模板中:

// item-row.hbs
// a couple of HTML here
<button {{action "addNewItem"}}> </button>

当然我有一个分量

// item-row.js
export default Ember.Component.extend({
actions: {
        addNewItem: function(){
          this.sendAction('addNewItem');
          // already tried this.sendAction() without the parameter..
          return true;
    }
   }
});

最后，我的路线:

// item.js
export default Ember.Route.extend({
    actions: {
        addNewItem: function(){
          alert('reached the route!!!!!');
          // this is never printed =/
        }
    }
});

谢谢你的帮助

组件中的sendAction方法将在组件上查找与您传递该方法同名的属性，在本例中为'addNewItem'。因此，为了使您的示例工作，您需要将addNewItem = 'addNewItem'传递给item-row组件，以便该组件知道在路由上触发什么动作。

你可以看看这个JSBin，作为我所说的一个例子。它使用全局变量而不是ES6模块，但希望应该足够简单，可以遵循:)

烬指南的这一部分也可能对阅读有帮助。

相关文章：