Knockoutjs - 新實例VM的複雜對象綁定

我對ko有一個特別棘手的問題。我會試着解釋一些例子。Knockoutjs - 新實例VM的複雜對象綁定

首先，這裏是我試圖渲染的HTML垃圾。 foreach變量「Appliances」是一個數組，是viewModel的一個屬性。選項數據也是視圖模型的屬性數組。這裏的名稱是ApplianceTypes。

<table> 
<tbody data-bind="foreach: Appliances"> 
     <tr> 
      <td> 
        <select data-bind="options: $root.ApplianceTypes, value: $data.ApplianceType.Id, optionsValue: 'Id', optionsText: 'ApplianceTypeDesc'"> 
        </select> 
      </td> 
      <td> 
        <input data-bind="value: UnitNumber" /> 
      </td>     
     </tr> 
</tbody> 
</table>

好了，現在我們已經考慮到這一點，這裏的數據填寫的想法好一點：

var viewModel = { 
    RequestNumber:37, 
    UnitNumber:3, 
    Appliances:[{ 
     Id:2, 
     ApplianceType:{Id:5, ApplianceTypeDesc:"Water Heating Tankless"}, 
     ServiceApplianceQuantity:"1", 
    }], 
    ApplianceTypes:[ 
     {Id:5, ApplianceTypeDesc:"Water Heating Tankless"}, 
     {Id:1, ApplianceTypeDesc:"Dryer"}, 
     {Id:2, ApplianceTypeDesc:"Range"}, 
     {Id:3, ApplianceTypeDesc:"Heating"}, 
     {Id:4, ApplianceTypeDesc:"Water Heating"}, 
     {Id:6, ApplianceTypeDesc:"Fireplace"}, 
     {Id:7, ApplianceTypeDesc:"Make Up Air Heating"}, 
     {Id:8, ApplianceTypeDesc:"BBQ"} 
    ] 
    }

那麼，有沒有什麼大的問題就在這裏呢。我爲每個設備獲得一行用戶界面。每行都是一個填充了設備類型的類型下拉列表。如果我只是編輯我所擁有的，那麼viewModel.Appliances [i] .ApplianceType.Id更新和生活是很好的。如果我嘗試向我的設備陣列添加新設備，那麼applianceType.Id不會更新。下面是該代碼：

function ApplianceTypeViewModel() { 
var self = this; 
self.Id = ko.observable("5"); 
self.ApplianceTypeDesc = ko.observable(""); 
}; 

function ApplianceViewModel(applianceType) { 
    var self = this; 
    self.Id = ko.observable("-1"); 
    self.ApplianceType = ko.observable(applianceType); 
    self.ServiceApplianceQuantity:"1" 
}; 

viewModel.AddAppliance = function() { 
    viewModel.Appliances.push(new ApplianceViewModel(new ApplianceTypeViewModel())); 
};

最終它會是不錯的applianceType從陣列複製的電器[I] .ApplianceType，但說實話，我只是試圖讓標識更新有。剩下的我可以在服務器上完成。

如果數據存在，它會每次都改變。當我使用AddAppliance創建它時，數據不會改變。

謝謝大家！

來源

2012-12-03 Josh Robinson

在數據綁定剛落的「ID」的一部分，你的Appliances[i].ApplianceType將被正確填充所選設備的類型。

value: $data.ApplianceType.Id應該value: $data.ApplianceType

檢查這個的jsfiddle如何value綁定工作http://jsfiddle.net/angelyordanov/gRxMq/的例子。

而你的代碼修改爲在這裏工作http://jsfiddle.net/angelyordanov/vvGgD/。

敲除設計的方式options可以是任意javascript對象的數組，不僅僅是字符串，而且所選項目（value）將是這些對象之一。這就是爲什麼你有optionsText綁定，以指定選項的顯示文本是什麼。

來源

2012-12-04 09:13:06

您的ApplianceType在您的ApplianceViewModel是可觀察的。但是你value的選擇元件結合是

value: $data.ApplianceType.Id

你想要得到的觀察到的值的Id屬性，而不是從可觀察本身。你應該綁定的那部分更改爲：

value: ApplianceType().Id

或者也許是更好的選擇是讓ApplianceType無法觀測。您通常應該制定您希望觀察可觀察到的具體值，而不是其他視圖模型。

function ApplianceViewModel(applianceTypeViewModel) { 
    var self = this; 

    // ... 
    self.ApplianceType = applianceTypeViewModel; // just assign the view model 
};

來源

2012-12-03 20:32:41

Knockoutjs - 新實例VM的複雜對象綁定

回答

相關問題