Initialize multiple instances of No UI Slider in meteor

问题

How do I initialize mutliple instances of the No UI Slider in Meteor? I'd like to have multiple sliders on a page.

I've been trying with...

Template:

 <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));
  };

Calling this._id isn't going to do anything... Somehow it needs to run through all post IDs until there's a match, like doing Tasks.findOne(); and comparing to whats in the DOM.

If there is a better way of doing this... please let me know!

EDIT:

I updated my code to this, following the structure of other instances where plugins are intialized multiple times on the same page like this, making use of $this and .each

template:

<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'));
    });
  };

In the console, this gives me the error, "Error: Slider was already initialized."

回答1:

I needed to put 'this' in the right place...

  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'));
  }

Taking a look at RateIt a plugin with a similar usage helped me to figure it out.

来源：https://stackoverflow.com/questions/29503969/initialize-multiple-instances-of-no-ui-slider-in-meteor

标签

jquery

meteor

nouislider