如何阻止内部动作冒泡到外部链接到帮助器?

时间:2016-02-02 15:27:51

标签: ember.js ember-cli htmlbars

点击“修改”以触发“编辑”操作:

  {{#link-to "pages.show" page class="list-group-item"}}
    {{page.name}}
    <span class="badge" {{action "edit" page preventDefault=false}}>edit</span>
  {{/link-to}}

然后触发操作(例如打开编辑页面),但是在下一秒,链接重定向完成,所以我最终选择了“pages.show”路线。 / p>

预期:仅调用“编辑”操作,并且点击事件(?)不会“冒泡”到链接到帮助者。

附注使用Ember 2.2,上面的模板是组件的一部分。

PS:我认为在操作中使用 preventDefault = false 可以阻止这种行为 - 但很明显,链接帮助器从其他地方获取信息。

1 个答案:

答案 0 :(得分:7)

您需要的是event bubbling。您可以在bubbles=false帮助中使用action停用它,这样您的点击事件就不会冒泡到link-to元素

{{#link-to "pages.show" page class="list-group-item"}}
  {{page.name}}
  <span class="badge" {{action "edit" page bubbles=false}}>edit</span>
{{/link-to}}

http://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_event-propagation

preventDefault是另一回事,将preventDefault设置为false时,您允许DOM事件的默认浏览器操作。