1

My problem look like: How do I detect a click outside an element?

But I want to use ember.js do this. My template code:

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

I want to do when I double click the div, show input and I can change name in input. I think when I change name and click the body will save the name. I think is better. But I don't know how to set the event in body, when I click the body will hide input and save product.name.

Thanks.

Add a picture to show the behavior process:

enter image description here

Community
  • 1
  • 1
JeskTop
  • 471
  • 1
  • 4
  • 19
  • I solved a similar issue based on this answer: http://stackoverflow.com/questions/30623530/ember-mixin-to-detect-click-outside-of-view-component – Carl Mar 01 '16 at 08:45

1 Answers1

0

Not sure what you exactly meant but im guessing you're looking for something like this

<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();
     }


 })
}
kris
  • 2,028
  • 16
  • 33
  • Maybe use `on="doubleClick"` do catch doubleClick instead of click. – Lux Feb 29 '16 at 10:12
  • Yeah , changed it. I've never used it so not sure if it works tho =D – kris Feb 29 '16 at 10:49
  • Thanks. But that is not my meaning. It is when I doubleClick `product.name`, `input` will appear. And then, I click then `` (not this input) `product.name` will be save and `input` disappear. – JeskTop Feb 29 '16 at 14:16
  • @JeskTop Well you can put you action handler where ever you want. i dont know you html =D – kris Feb 29 '16 at 14:25
  • I add a picture to show the behavior process. It will be more clear. – JeskTop Mar 09 '16 at 07:21
  • Does it mean your `showOrHide` action is not triggered when you click anywhere after `product.name` editing is fished? – Pavol Mar 09 '16 at 08:57
  • @JeskTop You need to wrap your content with some span and add an action handler to it.
    – kris Mar 15 '16 at 06:38