將Knockoutjs數組綁定到引導滑塊

我試圖在web應用程序中實現引導滑塊並使用knockoutjs進行數據處理。將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的第一個字符。

有沒有人知道我在做什麼錯了？

來源

2017-07-08 HexXx

我相信<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>

來源

2017-07-08 09:39:35 SVSchmidt

** **感謝svschmidt！這個伎倆！雖然沒有我想要的那麼好，但它起作用。感謝您的信息，只輸入字符串作爲值！有一個問題：你用let _val = ko.observable（[20，50]）。你爲什麼不使用observableArray？ – HexXx

@HexXx很高興能幫到你！說實話，我在回答時沒有想到可觀察陣列。我想你可以輕鬆使用一個。 – SVSchmidt

將Knockoutjs數組綁定到引導滑塊

回答

相關問題