如何通過KnockoutJS

設置如何通過KnockoutJS

<select data-bind="options: $data.answers, optionsText: function(item) { return item.text }, value: selectedAnswer, optionsCaption: 'Choose...'"></select>

我希望做的是設置每個option元素的class屬性一些手段，使我最終：

<option class="someValue">12345</option>

這可以在KnockoutJS？我很難找到解決方案。

編輯：

我剛剛試過foreach結合，由阿爾喬姆的建議，這是非常接近的工作，因爲我想要的。但有一個問題。

在Question對象存在是簽約的SelectedAnswer觀察到的一個功能：

this.selectedAnswer.subscribe(function (answer) {}

當我使用foreach綁定，subscribe()打完，一次爲每一個問題（應該不火直到我選擇了答案，我認爲這是因爲「選擇...」選項現在沒有顯示）。

對於foreach綁定，我怎樣才能將默認文本設置回「選擇...」，並停止selectedAnswer.subscribe()發射，直到用戶選擇了一個項目，而不是在列表填充時。

編輯：

好的這是我做了這個。

在KO viewmodel類中，我有一個布爾值bindingFinished，我在selectedAnswer.subscribe()裏面檢查。如果false那麼我們只是從函數返回;如果屬實，則照常進行。

此外，我添加一個默認的「選擇」選項的答案，通過在陣列的開始添加一個新的Answer。最終的結果是，只有在用戶選擇了一個選項後，纔會在數據綁定時執行訂閱功能。

非常感謝Artem的幫助。

來源

2012-11-23 Jason Evans

查看更新的答案。 –

您可以使用foreach在select標籤，而不是結合的options：

<select data-bind="value: selectedAnswer"> 
    <option class="someValue">Choose...</option> 
    <!-- ko foreach: $data.answers --> 
    <option class="someValue" data-bind="value: $data, text: text"></option> 
    <!-- /ko --> 
</select>

這裏是工作提琴：應用後使用選擇的值（selectedAnswer）http://jsfiddle.net/vyshniakov/5bPWQ/1/

來源

2012-11-23 11:30:59

有這種奇怪的行爲，似乎選定的值沒有正確綁定 –

我剛碰到一個類似於這個問題，所以只知道在選擇菜單中使用註釋不適用於IE9 ... https：///github.com/knockout/knockout/issues/578 – Smegger

對於我來說，代碼給了一個錯誤此修復程序。我通過將value=""添加到默認選項（選擇...）來解決此問題。

來源

2014-04-23 09:25:06 Dillygirl

您可以使用optionsAfterRender綁定來執行此操作。
它會爲它生成的每個option元素調用提供的函數。
您只需將該類添加到元素即可。

例子：

HTML：

<select class="form-control" data-bind="options: list, 
     optionsAfterRender: addOptionClass"></select>

JS：

this.addOptionClass = function(optionElement) { 
    optionElement.classList.add("form-control"); 
};

來源

2016-02-12 15:05:19 Domysee

總部設在以前的答案，我只是發現了另一種方式來做到這一點

<select data-bind="foreach: yourArray"> 
    <option data-bind="value: IdValue, text: TextValue, attr: { customAttr: anyValueField }"></option> 
    </select>

它適用於我。我希望它可以幫助其他人

來源

2017-01-04 14:43:36 RogerEdward

如何通過KnockoutJS

回答

相關問題