0

如何在 Meteor中初始化No UI Slider的多个实例？我想在一个页面上有多个滑块。

我一直在尝试...

模板：

 <input type="checkbox" checked="{{checked}}" class="toggle-checked" />

 <span class="example-val" name="body" id="range{{this._id}}"></span>

JS：

Template.task.rendered = function() {
    $('#slider'+this._id).noUiSlider({
      start: 5,
      connect: "lower",
      step: 0,
      format: wNumb({
        decimals: 0,
      }),
      range: {
        'min': 0,
        'max': 10
      }
    });
    $('#slider'+this._id).Link('lower').to($('#range'+this._id));
  };

调用 this._id 不会做任何事情......不知何故，它需要遍历所有帖子 ID 直到匹配，比如做 Tasks.findOne(); 并与 DOM 中的内容进行比较。

如果有更好的方法来做到这一点......请告诉我！

编辑：

我更新了我的代码，遵循其他实例的结构，其中插件在同一页面上多次初始化，使用 $ this和 .each

模板：

<div class="slider"></div>
<span class="example-val range" name="body"></span>

JS：

  Template.task.rendered = function() {
    $('.slider').each(function() {
      var $this = $(this);
      $this.noUiSlider({
        start: 5,
        connect: "lower",
        step: 0,
        format: wNumb({
          decimals: 0,
        }),
        range: {
          'min': 0,
          'max': 10
        }
      });
      $this.Link('lower').to($('.range'));
    });
  };

在控制台中，这给了我错误，“错误：滑块已初始化。”

4

1 回答 1

1

我需要把“这个”放在正确的地方......

  Template.task.rendered = function () {
    this.$('.slider').noUiSlider({
      start: 5,
      connect: "lower",
      step: 0,
      format: wNumb({
        decimals: 0,
      }),
      range: {
        'min': 0,
        'max': 10
      }
    });
    this.$('.slider').Link('lower').to(this.$('.range'));
  }

看看RateIt一个类似用法的插件帮助我弄清楚了。

于 2015-04-11T13:43:48.953 回答