在流星中初始化 No UI Slider 的多个实例

Question

如何在 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 不会做任何事情...它需要运行通过所有 post ID 直到匹配，就像 Tasks.findOne ();并与 DOM.

中的内容进行比较

如果有更好的方法...请告诉我！

编辑：

我将我的代码更新为这个，遵循在同一页面上多次初始化插件的其他实例的结构 like this，利用 $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'));
    });
  };

在控制台中，这给了我错误，"Error: Slider was already initialized."

Answer 1

我需要将 'this' 放在正确的位置...

  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 具有类似用法的插件帮助我弄明白了。

在流星中初始化 No UI Slider 的多个实例

Initialize multiple instances of No UI Slider in meteor

jquery

meteor

nouislider