How to detect a click outside an element and send the event by ember?

Question

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:

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

kristjan reinhold · Answer 1 · 2016-02-29T10:49:29.140

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


 })
}

edited Feb 29 '16 at 10:49

answered Feb 29 '16 at 10:06

kristjan reinhold

2,038
1
17
34

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 – kristjan reinhold 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 – kristjan reinhold 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.
– kristjan reinhold Mar 15 '16 at 06:38

How to detect a click outside an element and send the event by ember?

1 Answers1