4

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

在这里，我将以 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 ] );
  }
});

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

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

4

1 回答 1

5

不幸的是，没有简单的方法可以将这样的自定义事件集成到 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 文档中的 Event Maps 部分，该列表位于该部分的末尾，并附有每个事件的说明。为方便起见，它们是：click, dblclick, focus, blur, change, mouseenter, mouseleave, mousedown, mouseup, keydown, keypress, keyup, tap. 请注意，还有其他事件，但开发团队已尝试使这些事件在跨浏览器/设备上顺利运行。

于 2013-10-01T19:05:44.797 回答