Ember Action - Bubbles

Ember CLI
1

I have a row which contains a drop down in which individual drop down item contains specific actions. The row also has an action. In order to avoid the bubbling of row action in drop down, i have to set bubbles as false. [ {{action bubbles=false}}] It throws an error, “Uncaught TypeError: Cannot read property ‘value’ of undefined” . I guess it might be due to the absence of action name.

Sample:

<tr {{action "rowAction"}}>
   <div class="dropdown">
         <span data-toggle="dropdown" {{action bubbles=false}}> //image </span>
         //drop down menu
        <ul>
           <li {{action "doSomething" bubbles=false}}></li>
         // other drop down list
       </ul>
   </div>
</tr>

Is there any solution for this case? TIA.

2

This line definitely doesn’t look right. You’ll definitely need an action name for the action helper. Or could you just get rid of the action helper there?

3

The API docs actually have a suggested solution: Ember.Templates.helpers - 4.6 - Ember API Documentation (see the disableBubbling helper under “Event Propagation).

2 Likes
4

@dknutsen @lennyburdette thanks for the suggestion. :grinning: