選擇值綁定不會默認填充沒有顯式值

我試圖使用手動選擇值綁定來獲取已選擇的對象的id，但我發現它不填充，除非給定明確的價值。這裏有一個例子：選擇值綁定不會默認填充沒有顯式值

<div id="container"> 
<select data-bind="value: selectedOption"> 
    <!-- notice the explicit value of 0 given below... why is that necessary to get selectedOption to be populated when bound? --> 
    <option value="0" data-bind="value: initialSelectedOptionId, text: 'initially selected option'"></option> 
    <!-- ko foreach: options --> 
    <option data-bind="value: id, text: name"></option> 
    <!-- /ko --> 
</select> 
<span data-bind="text: selectedOption"></span>

var viewModel = { 
    options: ko.observableArray([ 
     {id: 1, name: 'first option'}, 
     {id: 2, name: 'second option'}, 
     {id: 3, name: 'third option'}, 
     {id: 4, name: 'fourth option'} 
    ]), 
    selectedOption: ko.observable(), 
    initialSelectedOptionId: ko.observable(3) 
}; 
ko.applyBindings(viewModel, document.getElementById('container')); 
//uncommenting the following line will initially select the correct option 
//viewModel.selectedOption(viewModel.initialSelectedOptionId());

Here是表示將採取行動問題上的jsfiddle。請注意，selectedOption屬性在顯式時填充，但不在綁定時完成。這種行爲是一個錯誤嗎？如果不是，這個決定背後的推理是什麼？

來源

2014-02-18 kmkemp

出於好奇：你能詳細闡述爲什麼你要避免使用['options' binding]（http://knockoutjs.com/documentation/options-binding.html）？ – Jeroen

我認爲它比將包含靜態選項的計算集合混合在一起更清潔。 – kmkemp

您提出了一個有效的觀點，這是可以說的。我個人更喜歡使用['optionsCaption']（http://knockoutjs.com/documentation/options-binding.html#parameters）作爲單個靜態選項，或者爲多個「混合計算的集合」（因此它是單元可測試的）。 – Jeroen

你需要佈置您的選擇框更多像這樣的位：

<div id="container"> 
<select data-bind="options: options, value: selectedOption"> 


</select> 
<span data-bind="text: selectedOption"></span>

然後爲您JS你只需要做到這一點：

var viewModel = { 
    options: ko.observableArray([ 
     {id: 1, name: 'first option'}, 
     {id: 2, name: 'second option'}, 
     {id: 3, name: 'third option'}, 
     {id: 4, name: 'fourth option'} 
    ]), 
    selectedOption: ko.observable(3), 
}; 
ko.applyBindings(viewModel, document.getElementById('container'));

希望幫助，這個環節也可能對你有幫助：http://knockoutjs.com/documentation/options-binding.html

來源

2014-02-18 23:18:29 Grant

我知道有一個選項綁定和我可以通過創建一個新的列表來解決這個問題，包括靜態和動態內容以及綁定到這個列表，但這並不能幫助我理解爲什麼我給出的例子不起作用。 – kmkemp

這是否表現出你期望的樣子？

<div id="container"> 
<select data-bind="value: selectedOption"> 
    <!-- notice the explicit value of 0 given below... why is that necessary to get selectedOption to be populated when bound? --> 
    <option data-bind="value: initialSelectedOptionId, text: 'initially selected option'"></option> 
    <!-- ko foreach: options --> 
    <option data-bind="value: id, text: name"></option> 
    <!-- /ko --> 
</select> 
<span data-bind="text: selectedOption"></span>

var viewModel = { 
options: ko.observableArray([ 
    {id: 1, name: 'first option'}, 
    {id: 2, name: 'second option'}, 
    {id: 3, name: 'third option'}, 
    {id: 4, name: 'fourth option'} 
]), 
selectedOption: ko.observable(3), 
initialSelectedOptionId: ko.observable(0)}; 

ko.applyBindings(viewModel, document.getElementById('container')); 
//uncommenting the following line will initially select the correct option 
viewModel.selectedOption(3);

Fiddle here to see it working。

我認爲這是因爲沒有設置selectedOption應用綁定後，不工作的原因是因爲綁定發生的順序。 <select data-bind="value: selectedOption">首先被綁定，並且由於沒有綁定選項被綁定，所以KO無法正確應用該綁定。

我跟蹤了selectedOption的值，發現在應用綁定後直接將其設置爲空字符串。我猜測，當它將綁定應用於DOM時，KO會更新此值（通過雙向綁定）以匹配下拉菜單的「選定值」（因爲在該階段沒有綁定任何項目）。從那時起（直到你修改它），所有對selectedOption的綁定都將顯示爲空白。

有意義嗎？

來源

2014-02-19 03:47:42 NickGPS

是的。這是我使用它的兩種方式之一（另一種是價值屬性的明確設置... yuck）。 – kmkemp

更新了我的回答，以解釋我認爲正在發生的事情。綁定模型後，selectedOption的值被設置爲空字符串。我認爲這是因爲元素綁定到數據的順序。 – NickGPS

這就是我所懷疑的，但我找不到任何地方的任何錯誤文檔，這通常指向我不理解的東西。 – kmkemp

我已經更新了一個清潔代碼的小提琴答案之一。我看不出在選擇使用的foreach的需要標記

<div id="container"> 
<select data-bind="value: selectedOption, options: options, optionsText: 'name'"> 
</select> 
<span data-bind="text: selectedOption().name"></span>

它也同時使用選項和optionsText的選擇標籤

http://jsfiddle.net/62zrzmLe/

來源

2015-06-15 20:01:30 jmontenegro

選擇值綁定不會默認填充沒有顯式值

回答

相關問題