等待ajax结果绑定淘汰赛模型 [英] wait for ajax result to bind knockout model

问题描述

我有 getGeneral 调用ajax GET的函数。当ajax接收数据（json）时，它从给定的json创建KO模型并返回创建的KO。

I have getGeneral function that calls ajax GET. When ajax recieves data (json), it creates KO model from given json and returns created KO.

当创建Knockout模型并分配值时，knockout <$ c $应该调用c> applybindings 。这是我的代码：

When Knockout model is created and values are assigned, knockout applybindings should be called. Here is my code:

定义 GeneralModel 和一些相关函数（在 GeneralModel中）。 js ）：

Defines GeneralModel and some related functions (inside "GeneralModel.js"):

var GeneralModel = function() {

   //for now it is empty as data ar binded automatically from json
   // CountryName is one of the properties that is returned with json
} 

function getGeneral(pid) {
    $.ajax({
        url: "/api/general",
        contentType: "text/json",
        dataType: "json",
        type: "GET",
        data: { id: pid},
        success: function (item) {
            var p = new GeneralModel();
            p = ko.mapping.fromJS(item);
            return p;
        },
        error: function (data) {

        }
    });    
}

这是从另一个文件（GeneralTabl.html）调用的，它应该调用get函数和 applyBindings 更新UI：

This is called from another file (GeneralTabl.html), it should call get function and applyBindings to update UI:

var PortfolioGeneral = getGeneral("@Model.Id");
ko.applyBindings(PortfolioGeneral, document.getElementById("pv-portfolio-general-tab"));

但是，在这种情况下我收到错误（未定义CountryName）。这是因为 applyBindings 在ajax返回数据之前发生，所以我正在使用applyBindings来清空具有未定义属性的模型。

However, in this scenario I am getting error (CountryName is not defined). This is because applyBindings happens before ajax returns data, so I am doing applyBindings to empty model with undefined properties.

从Json到Model的映射在这里发生并且是assignes值：
p = ko.mapping.fromJS（item）;

Mapping from Json to Model happens here and is assignes values: p = ko.mapping.fromJS(item);

我也可以用所有字段填写GeneralModel，但没有必要（我猜）：

I can also fill in GeneralModel with all fields, but it is not necessary (I guess):

  var GeneralModel = function() {    
      CountryName = ko.observable();
      ...
  } 

它仍然会出错CountryName is未定义。

It will still give an error "CountryName is not defined".

解决方案是什么？

1）我可以以某种方式在 GeneralModel 内移动 getGeneral ，那么获取数据是GeneralModel初始化的一部分吗？

1) Can I somehow move getGeneral inside GeneralModel, so get data would be part of GeneralModel initialization?

或

2）也许我应该以某种方式做等待ajax结果然后只有 applyBindings ？

2) Maybe I should somehow do "wait for ajax results" and only then applyBindings?

或

我相信还有其他选择，我对KO和纯JS不太熟悉。

I believe there are other options, I am just not so familiar with KO and pure JS.

注意：我完全理解这是因为Ajax是Async调用，所以问题是如何重构这个代码考虑到我有两个单独的文件，我需要从外部调用getGeneral，它应该返回一些变量。

Note: I fully understand that this is because Ajax is Async call, so the question is how to restructure this code taking into account that I have two seperate files and I need to call getGeneral from outside and it should return some variable.

推荐答案

尝试使用返回的promise接口：

Try using the returned promise interface:

function getGeneral(pid) {
    return $.ajax({
        url: "/api/general",
        contentType: "text/json",
        dataType: "json",
        type: "GET",
        data: {
            id: pid
        }
    });
}

getGeneral("@Model.Id").done(function (item) {
    var p = new GeneralModel();
    p = ko.mapping.fromJS(item);
    ko.applyBindings(p, document.getElementById("pv-portfolio-general-tab"));
}).fail(function () {
    //handle error here
});

这篇关于等待ajax结果绑定淘汰赛模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！