3

フォームには、いくつかのオプションを持つ選択ボックスがあり、それぞれがフォームの残りの部分に影響を与えるさまざまな変数を持つレポートを表しています。開始日が必要なレポートもあれば、終了日が必要なレポートもあれば、両方が必要なレポートもあります。次のように、各レポートの要件をオプション要素にバインドしました。

<select data-bind="value: ReportId">
    <option value="ID" data-hasStartDate="BOOL" data-hasEndDate="BOOL">Report name</option>
</select>

<input data-bind="visible: hasStartDate" />
<input data-bind="visible: hasEndDate" />

ID はレポートの ID、BOOL は true または false です。ノックアウトを使用して、選択ボックスの値を reportId にデータ バインドします。しかし、適切なフォーム要素を表示するために、hasStartDate と hasEndDate の値を Knockout オブザーバブルにバインドする方法がわかりませんでした。

カスタム バインディングを使用しても、Knockout 値の hasStartDate と hasEndDate に値を適用するには、通常の jQuery onChange イベントが必要でした。Knockout 自体で完全に行うことは可能ですか?

4

1 に答える 1

2

選択ボックスのオプション バインディングを使用してみましたか?

を使用してノックアウトをバインドすることもできませんdata-whatever="some value"。次のように、常にdata-binddata-bind="bindingtype: value"を使用します。

編集: そうは言っても...<select>要素で選択されたオプションからデータを取得する場合は、次のjQueryを使用します:

$("select").on('change', function() {
   var selectedData = $(this).find(":selected").data("stuff");
});

次に、selectedData を使用して、これをノックアウト ビュー モデルに適用できます。

フィドルでの作業例: http://jsfiddle.net/RZq6Q/4/

于 2012-07-27T08:48:58.480 に答える