将jQuery UI事件添加到流星模板

Question

我正在使用meteor.js启动一个应用程序,我想知道是否有办法将jquery事件添加到流星模板.

这里我将以Jquery UI中的滑块小部件为例.

到目前为止我的代码是这样的:

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 ] );
    }
  });

};

但是我想(并且我认为正确的方法是)能够绑定事件,就像我点击按钮一样,例如:

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

你知道有没有办法做到这一点？

否则,我在哪里可以找到流星中支持的事件列表？

Answer 1

不幸的是,没有简单的方法将这样的自定义事件集成到Meteor的事件方法中.你的代码实际上没有任何问题.我要添加的唯一内容是检查以确保插件尚未初始化.所以:

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 ] );
            }
        });
    }

};

根据jQuery UI wiki,可以通过访问插件实例$( "#something" ).data( "pluginname" ),因此您可以使用它来检查插件是否已经初始化.

请注意,随着即将推出的Meteor UI更新,其中很多都会发生变化,敬请期待在接下来的几个月内更好地完成此类操作.

编辑:有关可用事件的列表,请查看Meteor文档中的 " 事件映射"部分,该列表位于该部分的末尾,并附有每个事件的说明.为了方便起见,虽然,它们分别是:click,dblclick,focus,blur,change,mouseenter,mouseleave,mousedown,mouseup,keydown,keypress,keyup,tap.请注意,还有其他事件,但开发团队已尝试使这些事件能够跨浏览器/设备顺利运行.