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并不会做任何事情......不管怎样，它需要遍历所有帖子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'));
    });
  };

在控制台中，这给了我错误，＆＃34;错误：滑块已经初始化。＆＃34;

Answer 1

我需要把这个＆＃39;在正确的地方......

  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的多个实例

1 个答案: