Knockoutで観測可能なマルチセレクションリストにJSON文字列を取得

Question

ViewBagに渡されたJSON文字列を私のノックアウト観測値に取得しようとしていて、それを使用してマルチセレクションリストを設定します。私は何が間違っているのかよく分かっていませんが、今はJSON文字列内の個々の文字を取り出し、選択リストのそれ自身の行に貼り付けています。ここで

は私のC＃のコントローラのコードです：

Dictionary<string, string> salesReps = new Dictionary<string, string>(); 
     foreach (var rep in salespeople.Salesperson) 
     { 
      salesReps.Add(rep.Code, rep.Code + " - " + rep.fullName); 
     } 
     //ViewBag.salespeople = salespeople.Salesperson.Select(x => x.Code).Distinct().ToList(); 
     ViewBag.salespeople = JsonConvert.SerializeObject(salesReps); 

そしてここでノックアウトコードです：

var cSource = function (data) { 
     var self = this; 

     ..... 
     self.salesPeople = ko.observableArray(); 
}; 

$(document).ready(function() { 

     var modelData = @Html.Raw(Json.Encode(Model)); 

     mySource = new cSource(modelData); 

     //var salesRepList = Html.Raw(Json.Encode(ViewBag.salespeople)); 
     var salesRepList = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.salespeople)); 
     console.log(salesRepList); 

     mySource.salesPeople = salesRepList; 

そしてここでHTMLを選択したコードです：

<select data-bind=" 
options: salesPeople, 
selectedOptions: chosenReps, 
optionsCaption: 'Choose rep(s)' 
"></select> 

と小さな私のconsole.logが吐き出すもののスニペット：

{"USERNAME1":"USERNAME1 - Full Name 1","USERNAME2":"USERNAME2 - Full Name 2","USERNAME3":"USERNAME3 - Full Name 3",..... } 

UPDATE

私は今、JSONで名前の変数を作成するには、C＃のコードを変更しました。ここに私の新しいにconsole.log出力です：

{"username":"BOBC","fullname":"Bob Cottin"},{"username":"JIMT","fullname":"Jim Thorpe"},{"username":"LUKEP","fullname":"Luke Peppin"}, ....} 

Answer 1

オプションは、オブジェクトまたは値の配列を期待しているバインディングが、あなたのコンソールログの営業担当者によると、単一の辞書形式のオブジェクトです。バインディングを選択オプションに解析する方法を知るためには、それを配列に変換する必要があります。

あなただけ、あなたは、オブジェクトの値のプロパティをつかむために、このようなループを使用することができますなど、valueプロパティを必要とし、「USERNAME1」、「USERNAME2」を無視することができた場合：

for (var x in salesRepList) { 
    if (salesRepList.hasOwnProperty(x)) { 
     mySource.salesPeople.push(salesRepList[x]); 
    } 
} 

あなたの場合より複雑な型が必要な場合は、オブジェクトの配列を作成するか、最後の編集でjsonに標準のパラメータ名を渡す必要があります。次に、knockoutのoptionsTextバインディングを使用して、オブジェクトのどのプロパティを表示テキストとして使用するかを選択できます。

例パー

：knockout docs

<select data-bind="options: availableCountries, 
        optionsText: 'countryName', 
        value: selectedCountry, 
        optionsCaption: 'Choose...'"></select> 

の3は、ここではあなたの例に適応しているの一部とjsFiddleだ：私はすぐに気づいたfiddle