使用 knockout.js 从表单获取或发送数据答案

【问题标题】：Fetching or sending data from a form using knockout.js使用 knockout.js 从表单获取或发送数据
【发布时间】：2013-08-08 13:15:04
【问题描述】：

Knockout 的新手，也是前端设计师，所以我需要简单的交谈。

我有一个表单需要发送到数据库，然后再从数据库中检索。

请用非常简单的术语解释如何制作一个工作示例来说明保存和发布表单？

来自淘汰教程：http://knockoutjs.com/documentation/json-data.html 我了解获取和发送 json 数据。 json数据如何与表单匹配？什么是映射，是否有插件或简单示例说明如何将 json 数据映射回我的表单？基本上，我该怎么做下面淘汰代码示例中的注释？

获取数据：

$.getJSON("/some/url", function(data) {
    // Now use this data to update your view models,
    // and Knockout will update your UI automatically
})

发送数据：

var data = /* Your data in JSON format - see below */;
$.post("/some/url", data, function(returnedData) {
    // This callback is executed if the post was successful    
})

【问题讨论】：

想想看这个 - knockoutjs.com/documentation/submit-binding.html - 而这个 - knockoutjs.com/documentation/value-binding.html - 是最好的方法。

标签： jquery knockout.js

【解决方案1】：

简单的形式

 <form data-bind="submit: onSubmit">
    <input data-bind="value : firstName"/>
    <input data-bind="value : lastName"/>
    <input type="submit" text="Submit!"/>
</form>
Response: <span data-bind="text : response"></span>

简单的视图模型

var viewModel = new function()
{
    var self = this;
    self.firstName = ko.observable("default first");
    self.lastName = ko.observable("default last");
    self.responseJSON = ko.observable(null);
    self.onSubmit = function() 
    {
        var data = JSON.stringify(
            {
                first : self.firstName(), last : self.lastName()        
            }); // prepare request data
        $.post("/echo/json", data, function(response) // sends 'post' request
        {
            // on success callback
            self.responseJSON(response);
        })
    }
}

ko.applyBindings(viewModel);

JSFiddle DEMO

【讨论】：