Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Add jQuery UI events to meteor template

I am starting an app using meteor.js and I would like to know if there is a way to add jquery events to a meteor template.

Here I will take the example of the slider widget from Jquery UI.

So far my code is this :

Template.price_selector.rendered = function (){
  $( "#price_selector" ).slider({
    range: true,
    min: 0,
    max: 200,
    values: [ 0, 200 ],
    slide: function( event, ui ) {
      $( "#amount" ).val( "€" + ui.values[ 0 ] + " - €" + ui.values[ 1 ] );
    }
  });

};

But I would like (and I think the right way to do is) to be able to bind the event like I do for a click on a button for instance like so :

Template.price_selector.events({
  'slide #price_selector': function(event, ui){
    $( "#amount" ).val( "€" + ui.values[ 0 ] + " - €" + ui.values[ 1 ] );
  }
});

Do you know if there is some way for doing this ?

Otherwise, where can I find a list of the supported event in meteor ?

Note: This questions has been copied from Stack Overflow. Posted by Itbesh. The bounty is provided by CodersClan.

User Gravatar

CodersClan

Posted Oct 1 2013 11:27 UTC

$25



1 Replies


Unfortunately there's no easy way to integrate custom events like that into Meteor's events method. There's actually nothing wrong with your code. The only thing I'd add is a check to make sure the plugin hasn't already been initialized. So:

Template.price_selector.rendered = function (){

    if (! $('#price_selector').data('uiSlider')) {
        // The data attribute for the slider is not set, so the slider has not yet been created
        // If the slider is still around, we don't want to initialize it again
        $( "#price_selector" ).slider({
            range: true,
            min: 0,
            max: 200,
            values: [ 0, 200 ],
            slide: function( event, ui ) {
                $( "#amount" ).val( "€" + ui.values[ 0 ] + " - €" + ui.values[ 1 ] );
            }
        });
    }

};

According to the jQuery UI wiki, plugin instances are accessible via $( "#something" ).data( "pluginname" ), so you can use that to check if a plugin's already initialized.

Note that a lot of this will change with the upcoming Meteor UI update, so stay tuned for a better way to do things like this within the next couple of months.

User Gravatar

BenjaminRH

Posted Oct 1 2013 11:50 UTC

Solution

This didn't solve your task? Get your own custom solution.

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions