Ember - link 块内的操作

Question

我正在 Ember.js 中构建一个包含 table 的组件。 table 中的每个 tr 都是使用 {{#link-to ...}} 创建的，因此单击该行的任意位置会将用户带到另一条路线。

但是，我想使这些行中的 td 元素可单击以在新的 window 中打开 link。我正在这样做。

现在，单击正确的 td 元素将同时触发 {{#link-to}} 重定向并激活对 td 元素的操作。

相反，我希望单击适当的 td 元素以仅触发该元素的操作，并忽略上面的 {{#link-to}} 事件。我该怎么做？

这是我的代码的样子：

<table>
  {{#link-to 'widget' widget.id tagName='tr'}}
    <td>Go to link-to</td>
    <td {{action 'sendMail' widget.email}}>Send Email</td>
  {{/link-to}}
</table>

Answer 1

Look at this twiddle 实施了您的案例。

你需要调用 event.stopPropagation 因为你需要 event 对象，为了得到它我使用了 onclick={{action

<table>
  {{#link-to 'my-route' tagName='tr' bubble=false}}
    <td>Go to link-to</td>
    <td onclick={{action 'sendMail' }}>Send Email</td>
  {{/link-to}}
</table>

在 sendMail 中，您需要停止事件传播。

actions:{
    sendMail(event){
      console.log('sendMail');
      event.stopPropagation();
    }
  }

Ember - link 块内的操作

Ember - actions within link-to blocks

ember.js