jquery-ui - 将 jQuery UI 事件添加到 Meteor 模板

Question

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

这里我将以 Jquery UI 中的 slider 小部件为例。

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

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

};

但是我希望(并且我认为正确的方法是)能够绑定(bind)事件，就像我单击按钮一样，例如:

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

你知道是否有办法做到这一点吗？

否则，我在哪里可以找到meteor支持的事件列表？

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 更新，其中很多内容都会发生变化，因此请继续关注 future 几个月内执行此类操作的更好方法。

编辑:有关可用事件的列表，请查看 Event Maps section in the Meteor docs ，列表位于该部分的末尾，并附有每个事件的解释。但为了方便起见，它们是:click、dblclick、focus、blur、change >、mouseenter、mouseleave、mousedown、mouseup、keydown、按键、按键、点击。请注意，还有其他事件，但开发团队已尽力使这些事件能够跨浏览器/设备顺利运行。