Knockout post JSON 表单数据 post null

Question

我要拔头发了！！我已经阅读了所有示例、教程等，其他人使这看起来很简单，但我是 Knockout 的新手，无法让它工作。

我有一个用户配置文件表单，我想绑定来自 jquery ajax 请求的值。本质上，我希望能够从服务器中提取配置文件并将任何以前保存的数据加载到表单值中。我能够从 API 请求 JSON 并使用映射插件将值加载到表单中（我在数据库中预先填充了配置文件）。

$.getJSON("api/profile/" + "<?php echo $_SESSION['id']; ?>",function(json){

    var viewModel = ko.mapping.fromJS(json);     
    ko.applyBindings(viewModel);  

}); 

这很好用。我遇到的问题是在发布方面。如果用户第一次填写表单并单击保存按钮，则所有值都以 JSON 形式回传到服务器 - 但是 - 如果您只更改一个字段然后再次保存，则只有已更改的值会被发布并且所有其他值都发布为 null

我正在使用的视图模型（我已经尝试过使用 ko.observalbe()，使用 "" 值等！）

viewModel ={}

这是我的保存调用：

viewModel.save = function(){

              $.ajax({
                   url:"api/profile/" + "<?php echo $_SESSION['id']; ?>",
                   contentType: 'application/json',
                   data: ko.mapping.toJSON(viewModel),
                   type: "POST",
                   dataType: 'json',
                   success: function(data) {

                        alert("What's UP!");

                        alert(data)

                    },
                    error: function (data) { alert("error" + data); }
                    });
        }  

我知道这与保存中的“数据”行以及 Knockout 如何绑定到值有关，但对于我的生活，我无法弄清楚。任何帮助将不胜感激！

这是最终适用于那些搜索的最终代码：

<script type="text/javascript">

        var viewModel;

        function callback(data) {
            if (viewModel) {
                // model was initialized, update it
                ko.mapping.fromJS(data, viewModel); 
            } else {
                // or initialize and bind
                viewModel = ko.mapping.fromJS(data);
                ko.applyBindings(viewModel);
            }
        }

    save = function() {

             $.ajax({
                    url:"api/profile/" + "<?php echo $_SESSION['id']; ?>",
                    contentType: 'application/json',
                    data: ko.mapping.toJSON(viewModel),
                    type: "POST",
                    dataType: 'json',
                    success: function(data) {

                   alert( ko.mapping.toJSON(viewModel));    
                    },
                    error: function (data) { alert("error" + data); }
                    });
        }        


    $.ajax({
                url: "api/profile/" + "<?php echo $_SESSION['id']; ?>",
                contentType: 'application/json',
                type: "GET",
                dataType: 'json',
                success: function(data) {
                 callback(data);         


                }       
        });


  </script>

Answer 1

当我使用淘汰映射插件时，我总是创建变量（可以是全局的或在任何应用程序命名空间中）并且只初始化一次模型，所有其余的 ajax 请求只是更新模型，可能你错过了更新一步。

下面是代码（当然是简化了javascript代码）：

var model; // it is undefined, I just need to have the way to find whether the model was initialized or not
function callback(data) {
    if (model) {
        // model was initialized, update it
        ko.mapping.fromJS(data, model); 
    } else {
        // or initialize and bind
        model = ko.mapping.fromJS(data);
        ko.applyBindings(model);
    }
}

// do ajax request and call callback(data) on success callback

它帮助您解决了问题吗？