Binding 剔除动态绑定问题

Binding 剔除动态绑定问题,binding,knockout.js,Binding,Knockout.js,考虑以下通过knockout映射插件生成的ViewModel var originalData = { "QuoteSelectedViewModel": { "ProductName": "Select", "CoverQuotesViewModel": [ { "Code": 1, "Label": "Première Assistance 24h/24 (GRATUITE)", "IsMandatory": t

考虑以下通过knockout映射插件生成的ViewModel

var originalData = {

"QuoteSelectedViewModel": {
  "ProductName": "Select",      
  "CoverQuotesViewModel": [
     {
        "Code": 1,
        "Label": "Première Assistance 24h/24 (GRATUITE)",
        "IsMandatory": true,
        "IsSelected": true,            
        "DependsOn": []
     },
     {
        "Code": 2,
        "Label": "Assistance PLUS 24h/24",
        "IsMandatory": false,
        "IsSelected": false,          
        "DependsOn": []
     },
      {
        "Code": 8,
        "Label": "Heurts Animaux / Force de la Nature",
        "IsMandatory": false,
        "IsSelected": false,        
        "DependsOn": [
           2
        ]
     },
  ]}
}

var viewModel = ko.mapping.fromJS(originalData);

ko.applyBindings(viewModel);


<div data-bind="with: QuoteSelectedViewModel">
selected quote is : <span data-bind="text: ProductName"></span>
 <!-- ko foreach: CoverQuotesViewModel -->
<br/>    
  <div data-bind: if: IsVisible>
    <input type="checkbox" data-bind="checked: IsSelected"></input>
    <input type="text" data-bind="value: Label, enable: IsSelected"></input>
  </div>
<!-- /ko -->
</div>
[编辑]

以下是Paul建议的完整代码: (GetQuotessSuccess是一个AJAX成功处理程序)


好的,回到我先前的答案,经过修改,所以其他人看到这个答案都会得到正确的版本

您需要创建一个子viwe模型,并使用映射插件自动填充它,然后添加您的计算可观测值:

function CoverQuotesViewModel(data)
{
    var self = this;
    ko.mapping.fromJS(data, {}, self);

    // Copy the data to each property.
    self.IsVisible = ko.computed(function()
    {
            // your logic for each quote
    });
}
然后,您需要使用“创建映射”来映射主视图模型,并在其中创建子视图模型:

var mapping = {
    'CoverQuotesViewModel': {
        create: function(options) {
            var model = new CoverQuotesViewModel(options.data);
            return model;
        }
    }
}
var viewModel = ko.mapping.fromJS(data, mapping);

您不需要将此传递到computed,因为您正在引用self,这是此的存储版本。

您希望IsVisible的具体逻辑是什么?假设IsVisible的逻辑与问题无关。它应该返回true或false。问题是我不知道如何在数组的每个元素上动态生成这个计算的可观察函数。请参阅我的答案,了解如何在数组中的每个对象上循环。这不是你想要的吗?IsVisible函数应该在数组的每个元素上创建,而不是在根级别。太好了,它按预期工作。但是,手工绘制所有剩余属性的地图非常不方便。在手动添加IsVisible computed observable时,有没有办法保持自动映射?您可以尝试这个更新的答案,尽管我不知道这是否有效!谢谢,但它不起作用。IsVisible属性已正确添加到CoverQuotesViewModel,但所有其他属性均已消失。知道我能做什么吗?嗯,根据文档()它应该能工作。我认为您需要将其他属性添加到CoverQuotesViewModel类中,您完成了吗?
function CoverQuotesViewModel(data)
{
    var self = this;
    ko.mapping.fromJS(data, {}, self);

    // Copy the data to each property.
    self.IsVisible = ko.computed(function()
    {
            // your logic for each quote
    });
}
var mapping = {
    'CoverQuotesViewModel': {
        create: function(options) {
            var model = new CoverQuotesViewModel(options.data);
            return model;
        }
    }
}
var viewModel = ko.mapping.fromJS(data, mapping);