Knockout.js映射未显示绑定在子ObservableArray上的数据

Question

我在已定义对象上有一个可观察的子数组。 当返回服务器中的对象并将其填充到可观察到的分离中时，数据将无法显示。 但是，可以通过调试验证视图模型中的数据。 我创建了jsFiddle来说明问题。

http://jsfiddle.net/CraigHead/Y2Fr6/

我的视图模型就是这样定义的

function PropertyLease(propertyLeaseId, propertyCatalogId, confirmedBldgSF, leaseExpenseStructure, leaseTermRate, propertyType, yearBuilt)
{
    var self = this;
    self.PropertyLeaseId  = ko.observable(propertyLeaseId);
    self.PropertyCatalogId = ko.observable(propertyCatalogId);
    self.ConfirmedBldgSF = ko.observable(confirmedBldgSF);
    self.LeaseExpenseStructure = ko.observable(leaseExpenseStructure);
    self.LeaseTermRate = ko.mapping.fromJS(leaseTermRate);
    self.PropertyType = ko.observable(propertyType);
    self.YearBuilt = ko.observable(yearBuilt);
}

function PropertyLeaseTermRate(propertyLeaseTermId, propertyLeaseId, from, to, annualRatePSF)
{
    var self = this;
    self.PropertyLeaseTermId = ko.observable(propertyLeaseTermId);
    self.PropertyLeaseId = ko.observable(propertyLeaseId);
    self.From = ko.observable(from);
    self.To = ko.observable(to);
    self.AnnualRatePSF = ko.observable(annualRatePSF);
}

当从服务器返回数据时，我会更新它们

viewModel.LeaseSearchResults.removeAll();
var vmLeaseSearchResults = viewModel.LeaseSearchResults();
for(var idx = 0; idx<result.LeaseSearchResults.length; idx++){
    var data = result.LeaseSearchResults[idx];
    vmLeaseSearchResults.push(
        new PropertyLease(
            data.PropertyLeaseId, 
            data.PropertyCatalogId, 
            data.ConfirmedBldgSF, 
            data.LeaseExpenseStructure, 
            data.LeaseTermRate, 
            data.PropertyType, 
            data.YearBuilt
            )
        )
}
viewModel.LeaseSearchResults.valueHasMutated();

我不确定自己在做什么错？ 啊！

PS在用户从数据网格中进行选择之前，不会使用第二个视图模型PropertyLeaseTermRate 。 ;-)很抱歉给您带来混乱。

Answer 1

您有多个问题：

• 如果您正在编写var vmLeaseSearchResults = viewModel.LeaseSearchResults(); 由于()您引用的是衰弱数组，而不是可观察数组本身。 因此，当您调用vmLeaseSearchResults.push时，不会通知Knockout，因此您需要调用valueHasMutated 。

  但是正确的方法是让Knockout进行更改跟踪，因此您应该删除() ：so var vmLeaseSearchResults = viewModel.LeaseSearchResults; 那么您就不需要valueHasMutated调用。

• var vmLeaseTermRate = viewModel.SelectedLease().LeaseTermRate();也有同样的问题var vmLeaseTermRate = viewModel.SelectedLease().LeaseTermRate();

  但是，这里有第二个问题。 当您调用viewModel.SelectedLease(value); 淘汰赛将开始将您的详细信息列表绑定到<div data-bind="with: SelectedLease"> 。 但是您的模型（ value ）尚未定义LeaseTermRate ，因此Knockout将在ko foreach: LeaseTermRate上默默失败ko foreach: LeaseTermRate 。

  要解决此问题，只需将LeaseTermRate声明移至SelectedLease调用之前：

   var value = ko.mapping.fromJS(item); value.LeaseTermRate = ko.observableArray(); viewModel.SelectedLease(value); var vmLeaseTermRate = viewModel.SelectedLease().LeaseTermRate; 

演示JSFiddle。