CODEWITHSUNDEEP
javascriptmeteoriron-router
neo post modern
neo post modern

Reputation: 3404

Listen to events outside of template, but only when the template is present

I use IronRouter to structure my app into controllers (routers), on which I started attaching my events. So far so good.

I then started using the {{#contentFor ...}} feature and since then, my events don't fire anymore, because the region I render the relevant element, is part of a different DOM tree.

Is there any approach to still listen to these events? I considered simply adding a global listener, but that would remove a lot of flexibility from the events.

CoffeeScript:

MyRouter = RouteController.extend(...)
MyRouter.events(
  'click .inside': (event) ->
     alert("inside") # works
  'click .outside': (event) ->
     alert("outside") # does not work
)

HTML:

<button type="button" class="inside">
   inside
</button>

{{#contentFor 'anotherDomRegion'}}
  <button type="button" class="outside">
    outside
  </button>
{{/contentFor}}

And layout file:

<h1>event demo</h1>
<div>
  {{> yield}}
</div>
<div>
  {{> yield 'anotherDomRegion'}}
</div>

Upvotes: 1

Views: 153

Answers (1)

mertenvg
mertenvg

Reputation: 36

I've run into the same problem myself. The only way I've been able to work around it is to set the contentFor to a template so you can assign your events to that template.

{{> contentFor region="anotherDomRegion" template="anotherDomRegion"}}

then;

<template name="anotherDomRegion"> ... </template>

and;

Template.anotherDomRegion.events({ ... });

Good luck!

Upvotes: 1

Related Questions