使用knockout.js

Question

私はknockout.jsを使用して、4つのカスケードドロップダウンを取得しようとしています：

1. 検索基準を
2. サブ基準
3. 値
4. 状態

次のコードを使用して、最初のカスケードを取得することができました（データバインディングの問題によるものではありません）。リンク：これらのドロップダウンのための

http://blogs.msdn.com/b/thebeebs/archive/2011/12/01/price-calculator.aspx

データはViewBag.CriteriaData変数を使用してMVCビューからSearchCriterionのIEnumrableとして私のかみそりビューページに戻されます。次のように私のクラスのコードは次のとおりです。

public class SearchCriterion 
{ 
    public string Text { get; set; } 

    public string Value { get; set; } 

    public List<SubCriterion> SubCriteria { get; set; } 
} 

public class SubCriterion 
{ 
    public string SearchCriterionValue { get; set; } 

    public string Text { get; set; } 

    public string Value { get; set; } 

    public List<ColumnValue> ColumnValues { get; set; } 
} 

public class ColumnValue 
{ 
    public string SearchCriterionValue { get; set; } 

    public string SubCriterionValue { get; set; } 

    public string Text { get; set; } 

    public string Value { get; set; } 

    public IEnumerable<StateValue> StateValues { get; set; } 
} 

public class StateValue 
{ 
    public string SearchCriterionValue { get; set; } 

    public string SubCriterionValue { get; set; } 

    public string ColumnValue { get; set; } 

    public IEnumerable<int> InputStateIds { get; set; } 

    public IEnumerable<int> OutputStateIds { get; set; } 

    public int SelectedInputStateId { get; set; } 

    public int SelectedOutputStateId { get; set; } 

    public string Text { get; set; } 

    public string Value { get; set; }  
} 

私が直面しています問題は.cshtml次のコードの一部である：

1. 私は他の二つのために、このテンプレートで何を指定してくださいドロップダウン。例えば第三のドロップダウンは

   <script id='criteriaRowTemplate' type='text/html'> 
       <tr> 
        <td><select data-bind='options: criteriaData, optionsText: "Text", optionsCaption: "Search Criterion", value: SearchCriterion' /></td> 
        <td><select data-bind='visible: SearchCriterion, options: SearchCriterion() ? SearchCriterion().SubCriteria : null, optionsText: "Text", optionsCaption: "Sub Criterion", value: SubCriterion' /></td> 
        <td><select data-bind='visible: SubCriterion, options: SubCriterion() ? SubCriterion().ColumnValues : null, optionsText: "Text", optionsCaption: "Column Value", value: ColumnValue'/></td> 
        <td><select data-bind='visible: ColumnValue, options: ColumnValue() ? ColumnValue().StateValues : null, optionsText: "Text", optionsCaption: "State", value: StateValue'/></td>     
        <td><button data-bind='click: function() { viewModel.removeLine($data) }'>Remove</button></td> 
       </tr> 
   </script> 
   

2. （ColumnValueはSubCriterionの一部である）ColumnValue.Valueにバインドする必要があり、この正しいですか？

   var CriteriaLine = function() { 
   this.SearchCriterion = ko.observable(); 
   this.SubCriterion = ko.observable(); 
   this.ColumnValue = ko.observable(); 
   this.StateValue = ko.observable();  
   
   // Whenever the Search Criteria changes, reset the Sub Criteria selection 
   this.SearchCriterion.subscribe(function() { this.SubCriterion(undefined); }.bind(this)); 
   this.SubCriterion.subscribe(function() { this.ColumnValue(undefined); }.bind(this)); 
   this.ColumnValue.subscribe(function() { this.StateValue(undefined); }.bind(this)); 
   

   }

3. 完全なC＃オブジェクトをJavascriptオブジェクトにマップするにはどうすればよいですか？私たちは最初の2つのドロップダウンを持っている場合、それは動作します：

   // Create a Javascript object object with the same property names as the C# object 
   var dataToSearch = $.map(this.lines(), function (line) { return line.StateValue() ? line.StateValue() : undefined; }); 
   
       var SearchObject = new function() { 
         this.StateValues = dataToSearch; 
       }; 
   
       // Convert the object to JSON 
       var searchCriteria = JSON.stringify(SearchObject); 
   

4. 何を結合するために、ここで変更する必要がありますか？

   // Apply the data from the server to the variable 
   
   var criteriaData = @Html.Raw(@Json.Encode(ViewBag.CriteriaData)); 
   
   var viewModel = new Criteria(); 
   
   ko.applyBindings(viewModel, document.getElementById("criteriaDiv")); 
   

EDIT：

私は今、カスケードドロップダウン（上記更新されたコード）を移入することができています。今私は4列、各列は、ドロップダウンの1つを持っています。私はまた、1 ... n個の行がKnockoutjsを使って動的に追加されています。したがって、ユーザーはこれらのドロップダウンから値を選択し、必要に応じてドロップダウンの行を追加できます。残りの唯一のことは、ユーザーがコントローラにドロップダウン用に選択した値を返すことです（上記のポイント3）。私はどのようにそれを行うことができるか分かりません。どんな助けもありがとう。

EDIT 2：

はアイテム＃3のための作業のコードを追加し、ColumnValueとStateValueクラスを変更しました。

Answer 1

私はあなたの質問を完全に理解しているかどうかはわかりませんが、とにかくそれを打つつもりです:)。実際に次のドロップダウンがアクティブになるようにするには、「検証する」方法を探していると思いますか？

もしそうなら、それはComputed Observablesという観点からアプローチすることができます。基本的には、それぞれのドロップダウンを以前の依存関係から派生した計算値にバインドします。私は答え、希望を更新http://jsfiddle.net/farina/ZNBcM/3/

Answer 2

...

は私がバイオリンを書いてみましょうと私はあなたが表示されます:)

OK、これに打撃...遅れて申し訳ありませんが得られ、それは意志新しいComersを助けてください。 MVCでKnockout JSを使用して階層的なドロップダウンをバインドする方法

Here良い例が見つかります。