ember.js - 如何阻止内部操作冒泡到外部链接助手?

标签 ember.js ember-cli htmlbars

点击“编辑”触发 Action “编辑”时:

  {{#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”路线。

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

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

PS:我认为在操作中使用 preventDefault=false 会阻止此类行为 - 但显然链接助手从其他地方获取信息。

最佳答案

您需要的是事件冒泡。您可以通过在 action 帮助程序中使用 bubbles=false 来禁用它,这样您的点击事件就不会冒泡到 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 事件的默认浏览器操作。

关于ember.js - 如何阻止内部操作冒泡到外部链接助手?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35157428/

相关文章:

javascript - Ember.computed.equal 在相同的字符串上返回 false

jquery - 我可以从 jquery 函数创建 ember 计算属性吗?

javascript - Ember.js 新的路由 api

twitter-bootstrap - 在 ember 3.8 中使用 Bootstrap

javascript - 使用 HTMLBars 绑定(bind)静态和动态类

javascript - 在 Ember.js HTMLbars 模板中输出 Controller 变量

javascript - 覆盖 Ember 2.x 核心组件中的 "view"级别属性

ember.js - emberjs 和 ember-cli 的区别

ember.js - 模型 Hook 中的 params 为空,但 paramsFor 不为空

ember.js - ember-2.0 尖括号组件不适用于 ember-cli@0.2.7