淘汰赛动态绑定问题(knockout dynamic binding issue)

2019-07-21 21:23发布

考虑,其通过敲除映射插件生成以下视图模型。

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>

现在,我想隐藏div时ISVISIBLE返回false。 ISVISIBLE还不存在,并且它应该是CoverQuotesViewModel阵列的每个元件上的计算可观察到的功能。

如何生成每个元素此计算观察的功能?

谢谢

[编辑]我在这里加了的jsfiddle: http://jsfiddle.net/graphicsxp/fpKWM/

[EDIT2]其实淘汰赛文档是清楚该怎么做:

当然,创建回调里面,你可以,如果你希望做的是另调用ko.mapping.fromJS。 一个典型的使用情况可能是,如果你想使用一些额外的计算观测到扩充原始JavaScript对象:

VAR myChildModel =函数(数据){ko.mapping.fromJS(数据,{},这一点);

 this.nameLength = ko.computed(function() { return this.name().length; }, this); } 

[编辑]

这里是继保的建议的全码:(getQuotesSuccess是AJAX成功处理程序)

viewModel.getQuotesSuccess = function (result) {
var myCoverQuotesViewModel = function (data, parent) {
    var self = this;
    ko.mapping.fromJS(data, {}, this);

    self.IsVisible = ko.computed(function () {
        var visible = true;
        if (self.DependsOn().length > 0) {
            $.each(self.DependsOn(), function (index, value) {
                var dependency = viewModel.QuoteSelectedViewModel().CoverQuotesViewModel.filterByProperty("Code", value);
                if (dependency().length > 0) {
                    visible = visible & dependency()[0].IsSelected();
                } else {
                    visible = false;
                }
            });
        }

        return visible;

    }, this);
}

var mapping = {
    'CoverQuotesViewModel': {
        create: function (options) {
            return new myCoverQuotesViewModel(options.data, options.parent);
        }
    }
}

  ko.mapping.fromJS(result, mapping, viewModel);
};

Answer 1:

好了,回到原来我刚才的答复,与你的修改,所以任何人都在寻找这个答案实际上得到了正确的版本!

你需要创建一个子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);

你并不需要通过this入计算的,因为你是引用自我,这是您存储的这个版本。



文章来源: knockout dynamic binding issue