adding dynamically check boxes and use to show and hide content in knockout

Question

function that returns an object

 function newParty(id,name,date){
    return {
            id:id,
            name:name,
            date:date,
            isVisible:ko.observable(false),
        }
    }

this is the html

<div data-bind="foreach:$root.partyArray">
    <p>show me party: <input type="checkbox" data-bind="checked: $data.isVisible" /></p>
    <div data-bind="visible: $data.isVisible">
         Date of party: "December
    </div>
</div>

this my viewModel

var viewModel=function(){
    var self=this;
    self.partyArray=ko.observableArray([newParty('id','New York Party','now!!')])
}

the problem is that when there are many parties, if i check one, it checks all the inputs

how can i enumerate the parties???

Answer 1

This fiddle examle works for me, try it: http://jsfiddle.net/LVejc/

<div data-bind="foreach:$root.partyArray">
<p>show me party: <input type="checkbox" data-bind="checked: isVisible" /></p>
<div data-bind="visible: isVisible">
    Date of party: <span data-bind="text: date"></span>
</div>