Question

我试图在webapplication中实现一个bootstrap滑块，并使用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>不是这样，它接受任意数据类型，甚至是对象。

我的建议是解决这个问题。在下面的例子中，我使用一个可写的计算来解析＆＃39; 20,40＆＃39;进入你描述的形式的数组。您可以使用data-bind = 'value: val'提供此类计算。

＆＃13;

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

＆＃13;

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

＆＃13;

将Knockoutjs数组绑定到Bootstrap滑块

1 个答案: