表單不提交到服務器 - 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) } 
     }); 
    }; 
}