使用Elessar库将ID传递到范围

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，它可以告诉您该值是否与之前的值不同（例如，Backbink's的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元素）更有意义。我会在以后的版本中添加这个。