CODEWITHSUNDEEP
meteor
peter
peter

Reputation: 6137

How can I react to DOM events that Meteor Templates don't support?

Currently meteor supports a limited number of events that we can react to from our template definitions. I would like a way to react to events beyond this predefined list. I want the freedom to add any event, even custom events, to the list of possible events in a template.

One idea I had would be to set up a jquery event handler somewhere that listens for the unsupported event and have it set a session variable:

$(form).submit( ->
    Session.set('formSubmitted', true)

And then use that session variable when rendering a template:

Template.confirmation.submitted = ->
    return Session.get('formSubmitted')

<template name="confirmation">
    {{#if submitted}}
        <!-- do whatever -->
    {{/if}}
</template>

But this is just a workaround and doesn't really address the issue. Is there a real Meteor-way of doing this? Is this something I can do with the new Spark implementations?

NOTE: Please ignore the fact that I'm using the submit event here. I know I can just bind a click event to the submit button, but that's beside the point.

NOTE 2: The accepted answer to this question is also just a workaround.

Upvotes: 2

Views: 946

Answers (1)

Andreas
Andreas

Reputation: 1622

The rendered callback is what I use to do this.

http://docs.meteor.com/#template_rendered

The callback gives you template instance you should use to find the dom elements you need: http://docs.meteor.com/#template_inst

Untested example below ;)

Template.foo.rendered = ->
  $(this.find("form")).submit ->
    Session.set 'formSubmitted', true

Using a Session variable than to switch the view is a matter of taste I think.

I have an app State stored in the Session, that toggles Templates. Additionally the backbone package is very useful to provide some meaningful urls.

Upvotes: 1

Related Questions