観察可能な配列

Question

に基づいていくつかの要素を非表示に私は、チェックボックス、それぞれの人のための1つのリストを作成したいと思い、この

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プロパティifSelectedに気づくことができますオブジェクトであり、この等価目的でここで使用されています。ただし、この比較は文字列、範囲、数値の等価なものでなければなりませんが、boolに評価する必要があります。

フィドルhere

EDIT

あなたはここに、サーバーからデータを取得していることをあなたのコメントを見た後にあなたがいるかどうか処理するために追加のifEnabledプロパティを持つカスタムPersonsクラスを作成する方法でありますcheckboxはenableである。あなたが見ることができるように

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

-

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オブジェクトにその追加のプロパティを挿入するためにノックアウトのマッピング・プラグインを使用することができますこれは、あなたが望むようにオブザーバブルを作成し、オブザーバブルにマップしたくない単純な値として残す方法です。

そして最後に、コードの一部の下にあなたの結合のために所望のpeople配列を作成 -

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

更新フィドルhere