4

select次のように、KnockoutJSビューモデルを介してHTML要素を入力しています。

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

私がやりたいのは、何らかの方法で各要素のclass属性を設定することです。その結果、次のようになります。option

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

これはKnockoutJSで実行できますか？私はこれに対する解決策を見つけるのに苦労しています。

編集：

Artemが提案したように、バインディングを試したところですが、foreach希望どおりに動作するのに非常に近いです。しかし、1つの問題があります。

Questionオブジェクトには、SelectedAnswerobservableをサブスクライブする関数があります。

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

foreachバインディングを使用すると、subscribe()質問ごとに1回起動します（回答を選択するまで起動しないはずです。これは、[選択...]オプションが表示されなくなったためだと思います）。

バインディングの場合foreach、デフォルトのテキストを「Choose ...」に戻しselectedAnswer.subscribe()、リストが入力されているときではなく、ユーザーがアイテムを選択するまでの起動を停止するにはどうすればよいですか。

編集：

これが私がこれを行った方法です。

KOビューモデルクラスには、bindingFinished内部でチェックするブール値がありselectedAnswer.subscribe()ます。その場合false、関数から戻るだけです。trueの場合、通常どおり続行します。

Answerまた、配列の先頭にnewを追加して、回答にデフォルトの「Choose」オプションを追加します。最終的に、ユーザーがオプションを選択した後にのみ、データがバインドされているときにサブスクライブ機能が実行されません。

Artemにご協力いただきありがとうございます。

4

4 に答える 4

6

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-12T15:05:19.710 に答える
4

タグの代わりにforeachバインディングを使用できます。optionsselect

<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>

ここに作業中のフィドルがあります：http：//jsfiddle.net/vyshniakov/5bPWQ/1/

于 2012-11-23T11:30:59.690 に答える
0

私の場合、選択した値（selectedAnswer）を使用するコードは、この修正を適用した後にエラーを出しました。value=""デフォルトのオプション（選択...）に追加することでこれを修正しました。

于 2014-04-23T09:25:06.947 に答える
0

以前の回答に基づいて、私はそれを行う別の方法を見つけました

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

わたしにはできる。私はそれが他の人に役立つことを願っています

于 2017-01-04T14:43:36.240 に答える