綁定初始/默認值（選擇）列表

我有一個小問題與設置下拉的初始值。下面的代碼是視圖模型定義和$(document).ready中的初始化。我有一個名爲sourceMaterialTypes的數組和一個表示該數組的選定值的selectedSourceMaterialType。我正在使用（ASP.Net MVC）Model和ViewBag中的值初始化視圖模型。綁定初始/默認值（選擇）列表

var viewModel = { 
    sourceMaterialTypes : 
     ko.observableArray(@Html.Raw(Json.Encode(ViewBag.SourceMaterialTypes))), 
    selectedSourceMaterialType : 
     ko.observable(@Html.Raw(Json.Encode(Model.SourceMaterialType))), 
    ingredientTypes : 
     ko.observableArray(@Html.Raw(Json.Encode(ViewBag.IngredientTypes))), 
    selectedIngredientType : ko.observable() 
}; 

$(document).ready(function() { 

    ko.applyBindings(viewModel); 

    viewModel.selectedSourceMaterialType.subscribe(function(newSourceMaterialType) { 
     $.getJSON("/IngredientType/FindByMaterialType", 
        { "id": newSourceMaterialType }) 
      .success(function (data) { 
       viewModel.ingredientTypes($.parseJSON(data)); 
      }) 
      .error(function() { alert("error"); }); 
    }); 
});

以下是使用Knockout綁定定義下拉列表（選擇）列表的定義。

<select id="SourceMaterialTypeId" 
     name="SourceMaterialTypeId" 
     data-bind="options: sourceMaterialTypes, 
        optionsText: 'Name', 
        optionsValue : 'Id', 
        value: selectedSourceMaterialType"></select>

這一切工作，除了在源材料下拉最初選擇的值細（selectedSourceMaterialType正確綁定所以當下拉選擇改變其值被正確地更新，這只是我有一個問題的初始選擇與），這是我的視圖模型上的sourceMaterialTypes數組中的第一項。

我想最初選擇的值應該看起來從（服務器端）模型作爲selectedSourceMaterialType視圖模型屬性的值初始化。

來源

2011-07-11 Simon Fox

這應該工作得很好;檢查生成的html的源代碼，看看什麼是從''selectedSourceMaterialType：ko.observable（@ Html.Raw（Json.Encode（Model.SourceMaterialType）））''我懷疑這是一個空的參數。 – neebz

@nEEbz沒有，不爲空....'selectedSourceMaterialType：ko.observable（{ 「ID」：2，「名稱」：「水果」，「描述」：「新鮮水果」，「MeasuredIn」：1，「MeasuredInValue 「：1}），'是什麼被呈現，但是該初始選擇是在sourceMaterialTypes中的第一項....這使得如'sourceMaterialTypes：ko.observableArray（[{」 ID 「：1，」名稱「：」咖啡豆「，」描述「：」生咖啡豆「，」MeasuredIn「：0，」MeasuredInValue「：0}，{」Id「：2，」Name「：」水果「，」描述「：」Fresh果」，‘MeasuredIn’：1，‘MeasuredInValue’：1}]）'，（最初的選擇是‘咖啡豆’） –

我猜你需要的，而不是通過標識整個對象在selectedSourceMaterialType觀察到的功能 - >'selectedSourceMaterialType：ko.observable（2）' – neebz

我猜你需要傳遞的標識，而不是整個對象的selectedSourceMaterialType觀察到的功能 - >

selectedSourceMaterialType: ko.observable(@Model.SourceMaterialType.Id)

來源

2011-07-12 10:01:17 neebz

+11

但有沒有人知道如何做到這一點，如果你想提供整個對象，而不是使用optionsValue：'Id'？ – pilavdzice

API有適合您的解決方案，你只需要optionsCaption添加到您的選擇。

<select id="SourceMaterialTypeId" 
    name="SourceMaterialTypeId" 
    data-bind="options: sourceMaterialTypes, 
       optionsText: 'Name', 
       optionsValue : 'Id', 
       value: selectedSourceMaterialType, 
       optionsCaption: 'Please select...'"></select>

來源

2011-07-11 17:05:56 Straith

+10

我相信這個問題更關注的是讓初始/默認值成爲模型/視圖模型設置的值。所以，如果在編輯該項目時，您希望顯示最後一個選定的值，而不是「請選擇...」 – peteski

提示：'optionsCaption'本身就是一個可觀察項。如果它返回null，那麼這個項目就不會出現在選項列表中 - 所以你可以這樣做：'monthCaption = ko.computed（（）=> this.nextShipmentDate_month（）？null：' - Select Month - ' ）;'（假設打字稿在這裏） –

由於@nEEBz建議，selectedSourceMaterialType不正確初始化。在learn.knockoutjs.com "Lists and Collections" tutorial中，它們通過傳遞observable數組的特定索引的值來初始化它們的viewmodel的selected-item屬性。例如，這樣做：

selectedSourceMaterialType: ko.observable(sourceMaterialTypes[2])

...而不是這樣的：

selectedSourceMaterialType: ko.observable({"Id":1,"Name":"Coffee Bean" /* ... */});

這樣，所選擇的項目的值是相同的可觀察到的陣列，該下拉列表中的項的引用物品來自。

來源

2012-08-29 20:32:38 Bryan

我不認爲他們是這樣做的嗎？這需要對從服務器返回的結果進行額外處理，以確定需要選擇的項目的索引，而不需要這樣做。 –

綁定初始/默認值（選擇）列表

回答

相關問題