【问题标题】:KnockoutJS Mapping from Ajax来自 Ajax 的 KnockoutJS 映射
【发布时间】:2013-11-21 01:28:02
【问题描述】:

我的任务是对 KnockoutJS 进行 POC,但遇到了一个我无法弄清楚的问题。

我想使用 Ajax 从服务中检索数据,然后使用 ko.mapping.fromJS() 填充表单。当我从 ajax 调用的成功函数中调用映射时,我的表单不会填充。如果我将它移到成功之外,那么它工作正常。

更新:我确实知道在我的 jsfiddle 中调用了 load 函数(在里面放了一个警报,它确实触发了),但是表单没有填充..

http://jsfiddle.net/Ud9ex/6/

var planDesignData = {
        RecordID: '1124',
        Name: "Main"            
    };


var PlanDesignModel = function () {
var self = this;            

//*** As soon as I move this line inside the sucess the input doesn't get populated 
self.planDesign = ko.mapping.fromJS(planDesignData);

self.load = function () {
    $.ajax({
        type: "POST",
        url: "/echo/json/",
        contentType: "application/json; charset=utf-8",
        dataType: "json",                    
        success: function (data) {                       
            var loadedPD = {};

            //I want to run the mapping here

        }
    });
}
}


$(document).ready(function () {
            var viewModel = new PlanDesignModel();
            viewModel.load();
            ko.applyBindings(viewModel);    

        });

任何帮助将不胜感激。

【问题讨论】:

  • 在success函数中做console.log(data)会得到什么?
  • 好吧,在我的 jsfiddle 中我什么也得不到。如果我在本地执行此操作,我可以看到数据。

标签: jquery ajax knockout.js knockout-mapping-plugin


【解决方案1】:

这里是example

您只需将数据发送到/echo/json

在这个例子中我确实做了一个defer

$(document).ready(function () {
    var viewModel = new PlanDesignModel();
    $.when(viewModel.load).always(function(){
        ko.applyBindings(viewModel);
    });
});

但一切正常:

success: function (data) {
            var loadedPD = {};
            console.log(data);
            self.planDesign = ko.mapping.fromJS(planDesignData);
            //I want to run the mapping here

        }

注意,我确实延迟了 1 秒:

data: {
            json: JSON.stringify({
                RecordID: '1124',
                Name: "Main"
            }),
            delay: 1
        },

【讨论】:

  • 这对 GET 有效吗?我最初没有数据。我仍然遇到这个问题。
  • 我可能不是使用硬编码延迟的最佳主意。回调将是这里最好的解决方案。
猜你喜欢
  • 1970-01-01
  • 2012-12-26
  • 2013-11-15
  • 2012-03-06
  • 1970-01-01
  • 2015-07-04
  • 2013-11-14
  • 1970-01-01
  • 2021-09-15
相关资源
最近更新 更多