保存的值成JSON对象按键，复选框或选择被触发时(Saving values into a json

我有在我使用knockout.js框架一个非常基本的动态表单。我可以根据需要添加或实时删除联系人。我有保存文本区域内的JSON对象有点困难。在下面的功能self.save采用的值，并将其放在一个JSON对象内。然后textarea的保存属性data-bind='value: lastSavedJson' ，其保持JSON对象。我很努力在做这个每次棘手的部分keyup, change是在一个输入栏，复选框或选择菜单触发。最初，这是一个按钮，触发完成。我怎么能保存一个JSON里面的值对象每次按键，复选框，选择菜单被触发？的jsfiddle

var initialData = [{
    firstName: "Jenny",
    lastName: "LaRusso",
    phone: "(555) 121-2121",
    alt_phone: "(555) 123-4567",
    main1: false,
    main2: true    
}, {
    firstName: "Sensei",
    lastName: "Miyagi",
    phone: "(555) 444-2222",
    alt_phone: "(555) 999-1212",
    main1: true,
    main2: 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,
            main1: ko.observable(contact.main1),
            main2: ko.observable(contact.main2)
        });
    });

     $.getJSON("functions/getPerson.php", function(allData) {
          var initialData = $.map(allData, function(person) { return new ContactsModel(person) });
          console.log(self.contacts(initialData));
    });

    self.addContact = function () {
        self.contacts.push({
            firstName: "",
            lastName: "",
            phone: "",
            alt_phone: "",
            main1: false,
            main2: 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)
        })
    };

    $("input,checkbox,selct").bind('change keyup', function() {
        self.save = function () {
           self.lastSavedJson(JSON.stringify(ko.toJS(self.contacts), null, 2));         
        };
    });


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

};


ko.applyBindings(new ContactsModel(initialData));

我做了一些更改您的ViewModels，所以他们制定了一个比较好听。此外，你会发现我删除了jQuery位......这里的原因。 1）一般情况下，如果你发现自己使用jQuery和引用淘汰赛视图模型内的DOM，你就错了/有一个更好的办法做到这一点惯用的淘汰赛方式。这样可以使你的视图模型从模板中分离出来。

2）永远不会工作，你希望它的方式。淘汰赛将要添加和在其认为适当去除DOM的位，jQuery将只绑定到在查询运行时刻存在于页面上的事件。有可以工作的技术，但实际上淘汰赛与事件冒泡，这也是为什么上述原因＃1是非常中肯的干扰。欲了解更多信息，如果你好奇，看看jQuery的上和行为之间找出差异$("input,select").change(changeHandler)和$("body").on('change','input,select',changeHandler);

var initialData = [{
    firstName: "Jenny",
    lastName: "LaRusso",
    phone: "(555) 121-2121",
    alt_phone: "(555) 123-4567",
    main1: false,
    main2: true    
}, {
    firstName: "Sensei",
    lastName: "Miyagi",
    phone: "(555) 444-2222",
    alt_phone: "(555) 999-1212",
    main1: true,
    main2: false
}];
var ContactModel = function(contact) {
  var self = this;
  self.firstName = ko.observable(contact.firstName);
  self.lastName = ko.observable(contact.lastName);
  //what is the point of the phone observable when there is an array of phones?
  //the data structure doesn't match either - self.phone contains a phone number, and
  //self.phones contains objects with a 'number' property
  self.phone = ko.observable(contact.phone);
  //array for all the phones, initialize it with the passed in data or an empty array
  self.alt_phone = ko.observable(contact.alt_phone);
  self.phones = ko.observableArray(contact.phones || []);
  self.main1 = ko.observable(contact.main1);
  self.main2 = ko.observable(contact.main2);
}
var ContactsModel = function (contacts) {
    var self = this;
    self.contacts = ko.observableArray(ko.utils.arrayMap(contacts || [], function(contact) { return new ContactModel(contact)}));

     //this ajax call is going to override the default data passed in via the contacts parameter...Is that what's supposed to happen?
     $.getJSON("functions/getPerson.php", function(allData) {
          var initialData = $.map(allData, function(person) { return new ContactModel(person) });
          console.log(self.contacts(initialData));
    });

    self.addContact = function () {
        self.contacts.push(new ContactModel());
    };

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

    //your contacts didn't have a phone array, so I added one to make this function work.
    self.addPhone = function (contact) {
        contact.phones.push({
            number: ""
        });
    };

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

};

var mainModel = new ContactsModel(initialData);
var modelWithSerializedData = {
  MainModel:mainModel,
  mainModelSerialized: ko.computed(function() { 
      return ko.toJSON(mainModel);
  })
}
ko.applyBindings(modelWithSerializedData);

然后在你看来，我们就到mainmodel用“与”和包裹就在你提交表单的输入或避免将您的模板输入名称，以便它们不会与JSON数据提交。此外，请确保您使用valueUpdate以便它能够立即序列化你的输入绑定。

<div data-bind="with:MainModel">
  <!--the rest of your template -->
<ul data-bind="foreach:contacts">
  <li>
    <label>First Name: 
      <input data-bind="value:firstName, valueUpdate:'afterkeydown'" />
    </label>
  </li>
</ul>
</div>
<form>
<textarea name="data" data-bind='value: serializedModel' rows='25' cols='60'></textarea>
<input type="hidden" name="serializedModel" data-bind="value:mainModelSerialized" />
</form>