1

私は KO のバージョン 2.2.0 を使用していoptionます。要素の CSS を次のように設定しようとしています。

<select data-bind="foreach: $data.answers, value: selectedAnswer">
    <option data-bind="css: $data.getScoringLevel, value: $data, text: $data.text"></option>
</select>

getScoringLevel() 関数は次のとおりです。

// Answer.
var Answer = function () {
    var self = this;

    self.id = '';
    self.text = '';
    self.sendAnswerToWebService = true;
    self.scoringLevel = ko.observable(0);

    self.getScoringLevel = ko.computed(function () {
        switch (self.scoringLevel()) {
            case 1:
                return 'red';
            case 2:
                return 'orange';
            case 3:
                return 'yellow';
            default:
                return '';
        }
    }, self);
};

関数が実行されていることがわかります。関数内に配置したブレークポイントがヒットしているのを確認できますが、レンダリングされた HTML は次のようになります。

<option data-bind="css: $data.getScoringLevel, value: $data, text: $data.text" value="">Choose....</option>

class何らかの理由で属性が設定されていません。たとえば、`class="red"' をどこかに期待していました。

誰かが私が間違っていることを教えてもらえますか?

4

2 に答える 2

1

別の例: http://jsfiddle.net/TqgHb/3/ (リビジョン 3 では、JSLint の警告が修正thisされ、クロージャーの代わりに使用されますself)

私が行った唯一の変更は$index、オプション値に使用し、バインディングで不要なものを削除$dataし、Answer クラスでわずかに単純化したことです。

于 2012-11-23T15:04:39.100 に答える
1

できます。scoringLevelのデフォルト値は 0 であり、計算結果は空の文字列を返すため、このような html が表示されます。たとえば 1 に変更すると、赤のクラスがオプションに割り当てられます。

ここにフィドルがあります：http://jsfiddle.net/vyshniakov/DtDk7/1/

于 2012-11-23T14:34:26.383 に答える