viewmodelに初期ドロップダウン値を設定する

Question

私はviewmodelに初期値を渡す必要があるドロップダウンリストにいくつか問題があります。ちょうど明確にする：私は編集フォームで作業しているので、ドロップダウンリストには既に選択された値が設定されます。

レイザー：

私がこれまで持っていることである

<select data-bind="selectedOptions: selectedLength"> 
// razor code omitted 
foreach(var preValue in lengthPreValues) 
{ 
    if(lengthPreValues.Contains(preValue.value)) 
    { 
     <option selected="selected" value='@preValue'>@preValue</ option> 
    } 
    else 
    { 
    <option value='@preValue'>@preValue</option> 
    } 
} 

そして、私のviewmodelは、次のようになります。新しい値を選択するときに、これは間違いなく動作しますが

var editOfferViewModel = { 
    // Properties omitted 
    selectedLength: ko.observable("") 
}; 

ko.applyBindings(editOfferViewModel); 

、私は」初期値の設定にはちょっと立ち往生します。私は幸運にも、stackoverflow.comのRyan Niemeyerからチェックボックスとカスタムバインディングハンドラーを作成するのに十分な助けを得るのに幸運でしたが、私はまだ が正直であると分かりにくいです。

だから、これに関する助言やヒントは非常に高く評価されています。

Answer 1

これを行う一般的な方法は、モデル値をページにシリアル化することです。

var viewModel = { 
    choices: ko.observableArray(@Html.Raw(Json.Encode(Options))), 
    selectedChoices: ko.observableArray(@Html.Raw(Json.Encode(SelectedOptions))) 
}; 

はその後、ちょうどあなたの選択のように標準的なデータバインドを使用します：

data-bind="options: choices, selectedOptions: selectedChoices" 

あなたは、その後も、カミソリでのオプションの要素を移入する必要はありません。これは何かのようになります。

あなたviewModelは、外部ファイルで構築されている場合、あなたは自分のビュー内の観測の値を設定することができます

Answer 2

（外部スクリプトがロードされた後に）私のデータがあるようなもの：

dataList = [ {name:'length1',id:1},{name:'length2',id:2},{name:'length3',id:3},{name:'length4',id:4},{name:'length5',id:5} ] 

そして、私はこのようなドロップダウンして、そのデータを使用している：

<select name="xxx" id="xxxid" data-bind="options: dataList, value: selectedLength , optionsText: 'name', optionsValue: 'id', optionsCaption: 'Please Select...'"></select> 


<select name="xxx2" id="xxxid2" data-bind="options: dataList, selectedOptions: multiSelectedLength , optionsText: 'name', optionsValue: 'id', optionsCaption: 'Please Select...'" size="5" multiple="true"></select> 

var editOfferViewModel = { 
selectedLength: ko.observable(), 
multiSelectedLength: ko.observableArray()  
}; 

ko.applyBindings(editOfferViewModel); 

$(document).ready(function() { 
    // Set initial value 
    editOfferViewModel.selectedLength(2); 
    // Set inital multi value 
    editOfferViewModel.multiSelectedLength(['2','3']); 
}); 

あなたは初期値を設定するには、valueプロパティを使用することができます。

ここでは、作業exampleです。