My View はモデルにバインドされ、いくつかのドロップダウン リストが表示されます。それらの数とオプションは、モデルのいくつかのプロパティに基づいています。
ノックアウト js を使用して、ドロップダウン リストの選択した各値を監視可能な配列にデータ バインドし、どの値がどの ddl に属しているかを追跡したいと考えています。
各ドロップダウン リストは、次のコードを使用して表示されます。
@for (var i = 0; i < Model.ProductProfiles.Count; i++)
{
var productProfile = Model.ProductProfiles[i];
if (productProfile.IsVarying)
{
var lastItem = 0;
<div class="tab-pane" id="@productProfile.Name">
@for (var j = 0; j < productProfile.Attributes.Count; j++)
{
<text>@productProfile.Attributes[j].Name</text>
@Html.DropDownListFor(m => m.ProductProfiles[i].SelectedValues[j], (SelectList)ViewData["Levels_" + i + "_" + j],
new { @class = "ddl-levels" })
<br />
}
</div>
}
}
ドロップダウンリストが正しく入力され、デフォルト値が正しく設定されています (ViewData で渡されたモデルと選択リストの両方を使用)。
次のような配列にデータバインドする方法はありますか:
array[0]["0", "1", "3", "1",....] ここで、array[0] は Model.ProductProfiles[0] を参照し、配列の 2 番目の次元は選択された値を保持しますforループに表示されるddlの場合?
ビューモデルを次のように単純に設定してみました
var viewModel = {
selectedValues: ko.observableArray([])
};
そして必死になって、データバインド値を変更して、監視可能な配列の位置アクセスをシミュレートしようとしました。
@Html.DropDownListFor(m => m.ProductProfiles[i].SelectedValues[j], (SelectList)ViewData["Levels_" + i + "_" + j],
new { @class = "ddl-levels", data_bind = "value: productProfiles([" + i + "][" + j + "])" })
残念ながらうまくいきませんでした...
はっきりしていればよかったと思います。私を助けてくれる人はいますか?
ありがとう
編集:コメントのアドバイスに基づいて、多次元配列を次のような3つの監視可能な配列に分割しました:
var viewModel = {
selectedValuesProd0: ko.observableArray(),
selectedValuesProd1: ko.observableArray(),
selectedValuesProd2: ko.observableArray()
}
次に、HTMLコードを変更しました
var observableArrayProduct = "selectedValuesProd0";
if (i == 1)
{
observableArrayProduct = "selectedValuesProd1";
}
else if (i == 2)
{
observableArrayProduct = "selectedValuesProd2";
}
@Html.DropDownListFor(m => m.ProductProfiles[i].SelectedValues[j], (SelectList)ViewData["Levels_" + i + "_" + j], new { @class = "ddl-levels", data_bind = "value: " + observableArrayProduct + "()[" + j+ "]" })
ご覧のとおり、私はまだ一次元の監視可能な配列への位置アクセスを試みていますが、ユーザーがドロップダウン リストで何かを変更したときに、選択された値を追跡していません。
この時点で、位置アクセスが機能しないと思い始めていますが、そうである場合、他に何ができますか?
編集2:解決しました!
わかりました、重要なステップがありませんでした: 観測可能な配列の各項目はそれ自体が観測可能な値であるため、次のように修正しました。
var viewModel = {
selectedValuesProd0: ko.observableArray(ko.utils.arrayMap(selectedValuesPerProduct[0], function(item) {
return ko.observable(item);
})),
selectedValuesProd1: ko.observableArray(ko.utils.arrayMap(selectedValuesPerProduct[1], function(item) {
return ko.observable(item);
})),
selectedValuesProd2: ko.observableArray(ko.utils.arrayMap(selectedValuesPerProduct[2], function(item) {
return ko.observable(item);
}))
}
selectedValuesPerProduct は、サーバー側のコードからビューに (シリアル化後に) 渡されたモデルを使用して構築された 2 次元配列です。
これが役立つことを願っています!