隐藏基于观察到的阵列

Question

上的某些内容我有这样

function Person(id,name,age) { 
     this.id = id; 
     this.name = name; 
     this.age = age; 
    } 

    var listOfPeople = [ 
     new Person(1, 'Fred', 25), 
     new Person(2, 'Joe', 60), 
     new Person(3, 'Sally', 43) 
    ]; 

    var viewModel = { 
     people: ko.observableArray(listOfPeople), 
     selectedPeople: ko.observableArray([1]) 
    }; 


    ko.applyBindings(viewModel); 

我想建一个复选框列表，每人一个对象的列表。在这一点上它工作得很好。

现在我的困惑是如何只启用某些数组中存在的特定复选框，类似于所选人员。

我试过这个代码，它不工作

<ul data-bind="foreach: people"> 
    <li> 
     <input type="checkbox" value="" data-bind="checkedValue: id, checked: $parent.selectedPeople, enable:$parent.selectedPeople" ><span data-bind="text: name"></span> 
    </li> 
</ul> 

<hr/> 

<div data-bind="text: ko.toJSON($root)"></div> 

Answer 1

你必须有一个其他属性让说enabled做到这一点。你可以尝试这样的事情，

function Person(id, name, age) { 
 
    this.id = id; 
 
    this.name = name; 
 
    this.age = age; 
 
} 
 

 
var listOfPeople = [ 
 
    new Person(1, 'ABC', 25), 
 
    new Person(2, 'BCD', 60), 
 
    new Person(3, 'CDE', 43) 
 
]; 
 

 
var viewModel = { 
 
    people: ko.observableArray(listOfPeople), 
 
    selectedPeople: ko.observableArray([1]), 
 
    activePeople: ko.observableArray([1, 3]), 
 
    isEnabled: function(id) { 
 
    return this.activePeople().some(function(activeId) { 
 
     return activeId === id; 
 
    }); 
 
    } 
 
}; 
 

 
ko.applyBindings(viewModel);

<ul data-bind="foreach: people"> 
 
    <li> 
 
    <input type="checkbox" value="" data-bind="checkedValue: id, checked: $parent.selectedPeople, enable: $parent.isEnabled(id)"><span data-bind="text: name"></span> 
 
    </li> 
 
</ul> 
 

 
<hr/> 
 

 
<div data-bind="text: ko.toJSON($root)"></div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

Answer 2

您可以检查一个属性的值等于，在selectedPeople对象相同的属性，并用这个平等enable或disable，你可能需要像下面 -

<ul data-bind="foreach: people"> 
    <li> 
    <input type="checkbox" data-bind="checkedValue: id, checked: selectedPeople().ifSelected, enable: selectedPeople().ifSelected === ifSelected"><span data-bind="text: name"></span> 
    </li> 
</ul> 

您可以在看到另外boolean财产对象，在这里用于这种平等的目的。然而，这种比较应该是任何类型的（字符串，范围，数字相等等），但它应该评估为布尔值。

小提琴here

编辑

看着你的评论，你从服务器获取数据后，在这里是如何创建一个自定义Persons类的附加ifEnabled属性来处理是否或者不是checkbox是enable。现在

function Persons(data) { 
    var self = this; 
    if (data !== null) { 
     self.name = data.name; 
     self.id = data.id; 
     self.age = data.age; 
     // only below properties are observables. 
     self.ifSelected = ko.observable(false); 
     // below comparison will decide which check box to enable. 
     self.ifEnabled = ko.observable(self.age > 50); 
    } 
} 

，作为我对对方的回答评论提到这里，你可以用淘汰赛的地图插件，额外的属性插入Person对象，像这样 -

var mappingOptions = { 
    create: function(options) { 
     return new Persons(options.data); 
    } 
}; 

正如你所看到的，这就是您可以如何创建观察值并将它们保留为不想映射到可观察值的普通值。

最后，下面的代码创建所需people阵列的结合 -

var persons = ko.mapping.fromJS(listOfPeople, mappingOptions);  
self.people = ko.observableArray(persons()); 

更新小提琴here