如何檢測元素外部的點擊並通過ember發送事件？

Question

我的問題看起來像： 如何檢測元素外部的單擊？

但是我想用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();
     }


 })
}