javascript - 如何检测元素外部的点击并通过 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中更改名称。我想当我更改名称并单击正文时会保存名称。我认为更好。但我不知道如何在body中设置事件，当我点击body时会隐藏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();
     }


 })
}