表单不提交到服务器 - knockout.js

Question

我有一个基本的HTML表单。我正在使用knockout.js来执行一些客户端/服务器端操作。我可以很高兴地添加或删除联系人。提交值时我遇到了问题。当我点击提交按钮时，表单不会被重定向到任何地方。我相信这是由于self.save = function。我该如何正确提交整个表单的值？ 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) 
     }); 
    }); 

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

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


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

    //This is not working 
    $.post("/some/url.php", initialData, function(returnedData) { 
     // This callback is executed if the post was successful 
    }) 
}; 

ko.applyBindings(new ContactsModel(initialData)); 

Answer 1

一个很好的tutotial是knokcout网站之一：http://learn.knockoutjs.com/#/?tutorial=loadingsaving。在那里所述，做到这一点的方法之一是有一个表单标签定义，你有一个包含联系人的JSON表示observableArray一个隐藏字段：

<form action="/contacts/saveform" method="post"> 
    <input type="hidden" name="contacts" data-bind="value: ko.toJSON(contacts)" /> 
    <button type="submit">Save</button> 
</form> 

当访问者提交表单，您的服务器端代码将收到该JSON数据。第二种方法是使用Ajax请求将模型数据发送到服务器。

<button data-bind="click: save">Save</button> 

，然后实现保存功能：

var ContactsModel = function (contacts) { 
    self.save = function() { 
     $.ajax("/contacts/saveform", { 
      data: ko.toJSON({ contacts: self.contacts }), 
      type: "post", contentType: "application/json", 
      success: function(result) { alert(result) } 
     }); 
    }; 
}