我有getGeneral调用ajax GET的函数。当ajax接收数据(json)时,它将根据给定的json创建KO模型,并返回创建的KO。
getGeneral
创建敲除模型并分配值后,applybindings应调用敲除。这是我的代码:
applybindings
定义GeneralModel和一些相关功能(在“ GeneralModel.js” 内部):
GeneralModel
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:
applyBindings
var PortfolioGeneral = getGeneral("@Model.Id"); ko.applyBindings(PortfolioGeneral, document.getElementById("pv-portfolio-general-tab"));
但是,在这种情况下,我会收到错误消息(CountryName未定义)。这是因为applyBindings发生在ajax返回数据之前,所以我正在对具有未定义属性的空模型进行applyBindings。
从Json到Model的映射在此处发生,并分配值:p = ko.mapping.fromJS(item);
我也可以在所有字段中填写GeneralModel,但这不是必需的(我想):
var GeneralModel = function() { CountryName = ko.observable(); ... }
仍然会出现错误“ CountryName未定义”。
解决办法是什么?
1)我可以以某种方式进入getGeneral内部GeneralModel,因此获取数据将成为GeneralModel初始化的一部分吗?
要么
2)也许我应该以某种方式做“等待ajax结果”,然后才applyBindings?
我相信还有其他选择,我对KO和纯JS不太熟悉。
注意:我完全理解这是因为Ajax是Async调用,所以问题是考虑到我有两个单独的文件并且需要从外部调用getGeneral并应返回一些变量的情况下,如何重组此代码。
尝试使用返回的Promise接口:
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 });