如何检测元素外部的点击并通过ember发送事件？

Question

我的问题如下：How do I detect a click outside an element?

但我想用ember.js来做这件事。我的模板代码：

<td colspan="2" {{action "changeName" on="doubleClick"}}>
  {{#if isEditName}}
    {{input type="text" value=editName class="form-control"}}
  {{else}}
    {{product.name}}
  {{/if}}
</td>

当我双击div，显示input并且我可以在input中更改名称时，我想这样做。我想当我更改名称并单击正文将保存名称。我觉得更好。但是我不知道如何在正文中设置事件，当我点击正文时会隐藏input并保存product.name。

感谢。

添加图片以显示行为过程：

Answer 1

不确定你究竟是什么意思，但我猜你正在寻找像这样的东西

<td>
  {{#if isEditName}}
    <span {{action "showOrHide" on="doubleClick"}}> {{input type="text" value=product.name class="form-control"}}</span>
  {{else}}
     <span {{action 'showOrHide' on="doubleClick"}}> {{product.name}} </span>
  {{/if}}
</td>


isEditName: false,

actions : {
 showOrHide: function() { 
     this.toggleProperty('isEditName'); 

     if(!this.get('isEditName') { // changed from input to detail view
         this.get('product').save();
     }


 })
}