KnockoutJS一連のドロップダウンリストを観測可能な配列にデータバインドする方法

Question

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

dropdownlistsが正しく入力されており、デフォルト値が正しく（モデルとViewDataを渡された選択リストの両方を使用して）設定されています。

のようなものに見えるのアレイにデータバインドする方法があります：

配列[0] [ "0"、 "1"、 "3"、 "1"、...]ここで、配列は[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 + "])" }) 

残念ながら、それは動作しませんでした...

私は明確であることを望みます。そうでなければ、私は尋ねられたときに明確になることを嬉しく思います。 私を助けることができる人はいますか？

おかげ

EDIT：コメントの助言に基づいて、私は次のような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+ "]" }) 

を修正しました

ご覧のとおり、私はまだ一次元の観測可能な配列への位置的なアクセスを試みていますが、選択されたものを追跡していませんユーザーがドロップダウンリストで何かを変更したときの値です。

この時点で、私はポジショナルアクセスがうまくいかないと思っていますが、そうなら他に何ができますか？

EDIT 2：SOLVED！

[OK]を、私は重要なステップが欠落した観察可能な配列内の各アイテムは、観察値そのものであるので、私は、次のようにそれを固定：

selectedValuesPerProductは二次元アレイは、モデルを使用して構築され

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); 
    })) 
} 

サーバー側のコードからビューに渡されます（シリアル化後）。

こちらがお役に立てば幸いです。

Answer 1

私はこの質問を閉じたことがなかった実現ので、私はここに応答を追加している：

[OK]を、私は重要なステップがありませんでした：観察可能な配列内の各アイテムは、観察値そのものであるので、私は固定以下のようなこと：

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は、二次元アレイ（シリアライゼーション後に）表示にサーバ側コードから渡されたモデルを使用して構築され

。

Answer 2

私はそうのようなドロップダウンをダウン渡すことをお勧めします： {firstArrayと：[1,2,3]、secondArrayは：[4,5,6]}

は、基本的にはあなたの道あなたによってすべての作業を保存しません代わりにそれを行うことをお勧めします。インデクサーのように、firstArrayとsecondArrayを人に優しいものにすることはできません。なぜ私はそれが貴重な目標になるのか分かりませんが）私はできる限り保守可能なコードを追求します。あなたの後に来て、マルチレベルインデクサーを見る人は、あなたの賢さや後で頭痛に感謝しません。