如何检测元素外部的点击并通过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中设置事件，当我点击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();
     }


 })
}