将 Knockoutjs 数组绑定到 Bootstrap 滑块

Question

我正在尝试在 web 应用程序中实现引导滑块并使用 knockoutjs 进行数据处理。

Javascript

$(document).ready(() => {
    function ViewModel() {
        singleValue  = ko.observable(20)
        arrayValues  = ko.observableArray([20, 50])            
    }
    ko.applyBindings(ViewModel)
})

HTML

<input 
  type                ='text' 
  data-slider-min     = 0 
  data-slider-max     = 100
  data-slider-step    = 1 
  data-slider-tooltip ='hide'
  data-provide        ='slider'
  data-slider-value   = 20
  data-bind           = 'value: singleValue'
/>

<p data-bind='text: singleValue'></p> 

效果很好。如果我更改滑块的值，则 p 中的值会相应更改。

<input 
  type                ='text' 
  data-slider-min     = 0 
  data-slider-max     = 100
  data-slider-step    = 1 
  data-slider-tooltip ='hide'
  data-provide        ='slider'
  data-slider-value   = [20, 40]
  data-bind           = 'value: arrayValues'
/>

<p data-bind='text: arrayValues()'></p> 
// output is 20,50, so knockout is taking precedence, 
// because I set the initial value to [20, 40] in html

如果我更改滑块的值，则值似乎会相应更改。但它不再是一个数组，它是一个字符串值。但是最小值和最大值会随着滑块的变化而正确变化。

<p data-bind='text: arrayValues()[0]'></p>

这里渲染站点时的输出为 20。这是我所期望的。 但是当我开始移动滑块时，数组变成了一个字符串，输出变为 2，即 20,40 的第一个字符。

有谁知道我做错了什么？

Answer 1

我相信<input>、<textarea> 等的值绑定真的只是理解字符串值。 <select> 不是这样，它接受任意数据类型，甚至是对象。

我的建议是解决这个问题。在下面的示例中，我使用可写计算将 '20,40' 解析为您描述的形式的数组。您可以使用data-bind = 'value: val' 提供这样的计算结果。

let _val = ko.observable([20, 50]);
let val = ko.computed({
  read: () => _val(),
  write: v => {
    _val(v.split(',').map(n => parseInt(n)));
  },
});

console.log(val());
val('20,40');
console.log(val());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>