Question

我使用Elessar库创建了一个多范围选择器：https://github.com/quarterto/Elessar

到目前为止工作得很好，除了一件事......我似乎无法找到任何将ID传递给预先填充范围的功能。如果您需要更新从数据库加载的现有范围，则会出现问题。

以下是文档中提供的选项：

new RangeBar({
  values: [], // array of value pairs; each pair is the min and max of the range it creates (Ex: [[50, 100], [150, 200]])
  readonly: false, // whether this bar is read-only
  min: 0, // value at start of bar
  max: 100, // value at end of bar
  valueFormat: function(a) {return a;}, // formats a value on the bar for output
  valueParse: function(a) {return a;}, // parses an output value for the bar
  snap: 0, // clamps range ends to multiples of this value (in bar units)
  minSize: 0, // smallest allowed range (in bar units)
  maxRanges: Infinity, // maximum number of ranges allowed on the bar
  bgMarks: {
    count: 0, // number of value labels to write in the background of the bar
    interval: Infinity, // provide instead of count to specify the space between labels
    label: id // string or function to write as the text of a label. functions are called with normalised     values.
  },
  indicator: null, // pass a function(RangeBar, Indicator, Function?) Value to calculate where to put a     current indicator, calling the function whenever you want the position to be recalculated
  allowDelete: false, // set to true to enable double-middle-click-to-delete
  deleteTimeout: 5000, // maximum time in ms between middle clicks
  vertical: false, // if true the rangebar is aligned vertically, and given the class elessar-vertical
  bounds: null, // a function that provides an upper or lower bound when a range is being dragged. call     with the range that is being moved, should return an object with an upper or lower key
  htmlLabel: false, // if true, range labels are written as html
  allowSwap: true // swap ranges when dragging past
});

理想情况下，我认为，您应该能够使用ID（[min，max，id]）传递范围，以便在更新滑块时可以检测实际更改的范围。

我认为该项目的GitHub上的这个问题可能触及它：https://github.com/quarterto/Elessar/issues/67

文档中是否有我遗漏的内容？这似乎是必要的组成部分。

谢谢，安德鲁

Answer 1

这根本没有记录，但RangeBar有一个方法.addRange(range, data)。 data参数与范围一起存储。您可以使用

等手动创建范围

bar.addRange(model.getRangeValue(), {model: model})

并且，如果您的模型有一个方法changed，它可以告诉您该值是否与之前的值不同（例如Backbone的changedAttributes）：

bar.on('change', function(ev, values) {
  values.forEach(function(value, i) {
    var range = bar.ranges[i];
    if(range.data('model').changed(value)) {...}
  });
});

是的，这太可怕了，但实际上我在使用Elessar的应用程序中这样做了。发送范围和change事件（目前只传递值和DOM元素）更有意义。我将在以后的版本中添加它。

使用Elessar库将ID传递到范围

1 个答案: