在UI滑块中将数值转换为英尺和英寸

Question

我已在我的应用程序中实现了一个高度滑块。

当我滑动最小值和最大值时，它将上升到0.9并且上升到1.0，因为它是一个十进制值。我希望它达到0.11并且在0.12它将转换为1.0，因为我想要以英尺和英寸为单位的高度。（1英尺= 12英寸）。

我已经为它实现了knockoutjs，如下所示：

ko.bindingHandlers.TwoSideSlider = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            var options = allBindingsAccessor().sliderOptions || {};
            var sliderValues = ko.utils.unwrapObservable(valueAccessor());
            if (sliderValues.min !== undefined) {
                options.range = true;
            }

            options.slide = function (e, ui) {
                if (sliderValues.min) {
                    console.log(ui.values[0]);
                    sliderValues.min(ui.values[0]);
                    sliderValues.max(ui.values[1]);
                } else {
                    sliderValues.value(ui.value);
                }
            };

            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).slider("destroy");
            });

            $(element).slider(options);
        },
        update: function (element, valueAccessor) {
            var sliderValues = ko.toJS(valueAccessor());
            if (sliderValues.min !== undefined) {
                $(element).slider("values", [sliderValues.min, sliderValues.max]);
            } else {
                $(element).slider("value", sliderValues.value);
            }
        }
    };
};

我的Html代码是：

 <div class="slider-control">
        <div data-bind="TwoSideSlider: { min: MinHeight, max: MaxHeight }, sliderOptions: {min: 0, max: 15, step: 0.1}"></div>
        <div style="top:-12px;" data-bind="TwoSideSlider: { value: MaxHeight }, sliderOptions: {min: 0, max: 15, step: 0.1}"></div>
    </div>

有人可以建议我如何实现这个目标吗？

Answer 1

十进制值是基数10，因此您无法编写一些自定义代码来将十进制值转换为英尺和英寸，从而无法执行您要执行的操作。

理想情况下，你需要 1.5等于1英尺6英寸。

如果基于可观察对象使用computed values，则只需执行简单的数学运算即可在滑块移动时为您转换值。例如，你可以从1.5获得英尺和英尺：

// Round 1.5 down to nearest whole number
Math.floor(1.5); // would return 1 (feet)

// Take the value after decimal point, multiply by 12 & round to a whole number
Math.round(((1.5) % 1) * 12); // would return 0.5 * 12 = 6 (inches)

在下面的代码片段中演示了将其整合到计算中：

＆＃13;

＆＃13;

ko.bindingHandlers.slider = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    var options = allBindingsAccessor().sliderOptions || {};
    var observable = valueAccessor();

    if (observable().splice) {
      options.range = true;
    }

    options.slide = function(e, ui) {
      observable(ui.values ? ui.values : ui.value);
    };

    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
      $(element).slider("destroy");
    });

    $(element).slider(options);
  },
  update: function(element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    $(element).slider(value.slice ? "values" : "value", value);

  }
};

ViewModel = function() {
  this.values = ko.observable([1.9, 15.0]);
  this.valuesJson = ko.computed(function() {
    return ko.toJSON({
      values: this.values
    });
  }, this);
  this.firstFeet = ko.computed(function() {
    return Math.floor(this.values().slice(0, 1));
  }, this);
  this.firstInches = ko.computed(function() {
    return Math.round(((this.values().slice(0, 1)) % 1) * 12);
  }, this);
  this.lastFeet = ko.computed(function() {
    return Math.floor(this.values().slice(1, 2));
  }, this);
  this.lastInches = ko.computed(function() {
    return Math.round(((this.values().slice(1, 2)) % 1) * 12);
  }, this);
}

ko.applyBindings(new ViewModel());

＆＃13;

body,
html {
  font-family: Verdana;
  font-size: 8pt;
}
.slider {
  width: 60%;
  margin: 20px auto;
}

＆＃13;

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div class="slider" data-bind="slider: values, sliderOptions: {min: 1.0, max: 15.0, step: 0.05}"></div>

<span data-bind="text: valuesJson"></span>

<hr />

<p>Min: <span data-bind="text: firstFeet"></span>ft
  <span data-bind="text: firstInches"></span>in</p>
<p>Max: <span data-bind="text: lastFeet"></span>ft
  <span data-bind="text: lastInches"></span>in</p>

<hr />

<p>Min: <span data-bind="text: firstFeet"></span>.<span data-bind="text: firstInches"></span>
</p>
<p>Max: <span data-bind="text: lastFeet"></span>.<span data-bind="text: lastInches"></span>
</p>

＆＃13;

＆＃13;

＆＃13;