Associated But Disassociated Data Relationship

by origineil

HTML

<div>
    Doctor: 
    <select data-bind='options: doctors, optionsText: "name", optionsCaption: "Select...", value: doctor'></select>
</div>
 
<div style='border: solid 1px black' data-bind='with: doctor'>
    <span data-bind='text: "Name: " + name()'></span>
    <br/>
    <fieldset style='border: solid 1px blue; margin-left: 15px'>
        <legend>Schedule<button data-bind='click: $root.addSchedule'>Add</button></legend>
        
        <div data-bind='foreach: { data: schedules, as: "schedule"}'>
        <label>Hospital</label>
        <select data-bind='foreach: $root.availableHospitals, value: schedule.hospitalId'>
            <!--ko if: $index() == 0 -->
            <option>Please Select...</option> 
            <!--/ko-->
              
            <option data-bind="text: $data.name, value: $data.id,
                               click: function(){ $root.updateSchedule(schedule, $data.id)}"></option>
                        
        </select>
        </div>
        
        
    </fieldset>
    
    <button type='button' data-bind='click: $root.save'>Save</button>
</div>

JavaScript

var Doctor = function Doctor(data) {
    var self = this;
    self.name = ko.observable(data ? data.name : '');
    self.schedules = ko.observableArray(data ? data.schedules : []);
}

var Schedule = function Schedule(data) {
    var self = this;
    self.hospitalId = ko.observable(data ? data.hospitalId : '');
    self.hospital = ko.observable(data ? data.hospital : '');
}        

var vm = {
    doctor: ko.observable(),
    doctors: ko.observableArray([
        new Doctor({name: 'Who', schedules: [new Schedule({hospital: "Hospital1", hospitalId: "1"})]}),
        new Doctor({name: 'Watson', schedules: [new Schedule({hospital: "Hospital2", hospitalId: "2"})]})
                                ]),
    availableHospitals: ko.observableArray([{name:"Hospital1", id:"1"},
                                            {name:"Hospital2", id:"2"}])
   
}

 vm.updateSchedule = function(schedule, hospitalId){
     
        var match = ko.utils.arrayFilter(vm.availableHospitals(), function(item){
            return item.id === hospitalId;
        })
        //console.log(match)
        console.log("Set " + match[0].name + " for schedule.hospital")
        schedule.hospital(match[0].name);
    }
 
  vm.addSchedule= function(){
      vm.doctor().schedules.push(new Schedule());
 }
  
 vm.save= function(){
    var testjson = ko.toJSON(vm.doctor());
    console.log(testjson);
 }
 
 
ko.applyBindings(vm)