json 객체의 체크 박스 값 받기

Question

현재 knockout js 프레임 워크를 사용하여 배우고 놀고 있습니다. 나는 연락처를위한 기본 필드를 가지고있다. 연락처를 아무 문제없이 추가 할 수 있습니다. 그러나 성별 값을 설정하는 데 어려움이 있습니다 male 및 female. 제대로 선언했지만 JSON 객체를 읽을 때 성별에 대한 값이 표시되지 않습니다. 연락처가 남성 또는 여성 인 경우 왜 표시되지 않습니까? JSFIDDLE

var initialData = [{ 
    firstName: "Jenny", 
    lastName: "LaRusso", 
    phone: "(555) 121-2121", 
    alt_phone: "(555) 123-4567", 
    male: false, 
    female: true 
}, { 
    firstName: "Sensei", 
    lastName: "Miyagi", 
    phone: "(555) 444-2222", 
    alt_phone: "(555) 999-1212", 
    male: true, 
    female: false 
}]; 

var ContactsModel = function (contacts) { 
    var self = this; 
    self.contacts = ko.observableArray([]); 

    ko.utils.arrayForEach(contacts, function (contact) { 
     self.contacts.push({ 
      firstName: contact.firstName, 
      lastName: contact.lastName, 
      phone: contact.phone, 
      alt_phone: contact.alt_phone, 
      male: contact.male, 
      female: contact.female 
     }); 
    }); 

    self.addContact = function() { 
     self.contacts.push({ 
      firstName: "", 
      lastName: "", 
      phone: "", 
      alt_phone: "", 
      male: false, 
      female: false 
     }); 
    }; 

    self.removeContact = function (contact) { 
     self.contacts.remove(contact); 
    }; 

    self.addPhone = function (contact) { 
     contact.phones.push({ 
      number: "" 
     }); 
    }; 

    self.removePhone = function (phone) { 
     $.each(self.contacts(), function() { 
      this.phones.remove(phone) 
     }) 
    }; 

    self.save = function() { 
     self.lastSavedJson(JSON.stringify(ko.toJS(self.contacts), null, 2)); 
    }; 

    self.lastSavedJson = ko.observable("") 
}; 

ko.applyBindings(new ContactsModel(initialData)); 

Answer 1

knockout.js에서 체크 박스를 사용하려면, 올바른 구문은

<input type='checkbox' data-bind="checked: bindName" /> 

로 HTML에서

선언 체크 박스는 knockout.js을 통해/비활성화 확인란을 활성화하는

<script type="text/javascript"> 
var viewModel = { 
    bindName : ko.observable(false), 
}; 
</script> 

자바 스크립트 코드를

로 변경하십시오. 체크 박스

Male <input type="checkbox" data-bind='checked: male' /> 
Female <input type="checkbox" data-bind='checked: female' /> 

JS 바이올린 링크에 대한HTML 변경에

ko.utils.arrayForEach(contacts, function (contact) { 
    self.contacts.push({ 
     firstName: contact.firstName, 
     lastName: contact.lastName, 
     phone: contact.phone, 
     alt_phone: contact.alt_phone, 
     male: ko.observable(contact.male), /* Line Modified */ 
     female: ko.observable(contact.female) /* Line Modified */ 
    }); 

코드 - http://jsfiddle.net/dLbY7/15/