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

【问题标题】：Initialize multiple instances of No UI Slider in meteor在流星中初始化 No UI Slider 的多个实例
【发布时间】：2015-04-11 21:43:48
【问题描述】：

如何在 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 中的内容进行比较。

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

编辑：

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

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

【问题讨论】：

我看到this 并认为必须有更简单的方法。我将 HTML 更改为：<span class="example-val range" name="body"></span><div class="slider"></div> 并尝试在 jquery 中使用 .each 对其进行迭代，但这没有用。

标签： jquery meteor nouislider

【解决方案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 一个类似用法的插件帮助我弄清楚了。

【讨论】：