从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复选框，正确的语法是在HTML

申报复选框作为

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

启用通过knockout.js /禁用复选框

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

将javascript代码更改为

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 */ 
    }); 

在HTML更改代码复选框

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

JS小提琴链接 - http://jsfiddle.net/dLbY7/15/