EmberJS: Nested Component in Sliding Bar does not Fire Event

Question

I have the following app:

A sliding bar consists of a top and a bottom layer. On the bottom layer is a button component. When I slide the top layer away and try to click the button, just the sliding component click fires, not the button.

What could be the problem?

Templates:

<script type="text/x-handlebars" data-template-name="index">
  <h2>Sliding Bar Test</h2>
  
  {{#sliding-bar}}
    {{button-click}}
  {{/sliding-bar}}
</script>

<script type="text/x-handlebars" data-template-name="components/sliding-bar">
  <div class="bar top">
    This is on Top
  </div>
  <div class="bar bottom">
    {{yield}}
  </div>
</script>

<script type="text/x-handlebars" data-template-name="components/button-click">
    Click Me
</script>

Ember Code

window.App = Ember.Application.create();

App.SlidingBarComponent = Ember.Component.extend({
  click: function () {
    alert('slider clicked');
  },

  didInsertElement: function() {
    var topElem = this.$('.top');
    TweenMax.to(topElem, 0.25, {css:{left:-148}, overwrite:"all"});
  }
})

App.ButtonClickComponent = Ember.Component.extend({
  tagName: 'span',
  classNames: ['button'],

  click: function () {
    alert('button clicked');
  }
})

Full Source

There is also a JSBin for the full code

Edit:

I changed the lis to divs, but the problem remains. Any idea?

score 0 · Answer 1 · edited May 23 '17 at 11:50

0

There's already a stack overflow question which answers 'nested components events bubbling'. Here it is Ember: nested components events bubbling

Accepted answer have bin with solution. In short you need to bind bubbling chain using targetObject. Let me know if it helps.

edited May 23 '17 at 11:50

Community

1
1

answered Jul 28 '14 at 20:24

lame_coder

3,085
3
19
21

Thanks for your suggestion. The answer you were suggesting is about event bubbeling from the button up. I do not even get the event from the button. The slider component catches the event and does not delegate it down to the button. I get the click of the slider but not of the button... – deepflame Jul 28 '14 at 20:39

score 0 · Accepted Answer · answered Aug 03 '14 at 12:21

0

The problem is not in your Ember code which works just fine but only in the CSS z-index values, which you set. An element with a negative z-index doesn't receive any click events. Just compare to http://jsbin.com/haxovaxe/1/.

answered Aug 03 '14 at 12:21

Jonas Hörsch

473
3
9

you are right! seems the css I am working with is pretty messed up as well. Need to do some cleanups and feel very confident that it will work then. Thanks a lot! – deepflame Aug 04 '14 at 16:04

EmberJS: Nested Component in Sliding Bar does not Fire Event

Edit:

2 Answers2