从 Knockout 中的 AJAX 调用映射 JSON答案

【问题标题】：Mapping JSON from an AJAX call in Knockout从 Knockout 中的 AJAX 调用映射 JSON
【发布时间】：2014-01-26 17:23:07
【问题描述】：

我开始使用 Knockout Mapping，我遗漏了一些明显的东西？

当进行 AJAX 调用时，由于尚未返回数据，因此绑定失败。 One way around that 是设置一个空的 JSON 响应来预填充视图模型，但对我来说这似乎不对。如果可以放弃对初始空 JSON 对象的要求，那就太好了。

有办法解决吗？在写这篇文章时，我开始考虑将绑定延迟到第一个 JSON 查询返回之后。

谢谢

【问题讨论】：

你能显示你的ViewModel吗？您是如何进行此 AJAX 调用的？

标签： knockout.js mapping

【解决方案1】：

这是一个精简的例子......

$(function () {
    $(function () {
        function userposition(position, sduid, userName) {

            this.position = ko.observable(position);
            this.userId = ko.observable(sduid);
            this.userName = ko.observable(userName);
        }

        function overallTablesViewModel() {

            this.userpositions = ko.observableArray([]);
            var userpositions = this.userpositions;
            var options = {};

            this.FilterClick = function () {

               options =
                {
                    Prop1: value,
                    Prop2: value
                };

               if (sportId < 1) {
                   toastr.error('You need to select a sport.');
                   return;
               }

                $.getJSON('url', options, function (json) {
                    var mappedData = ko.utils.arrayMap(json, function (up) {
                        return new userposition(up.Position, up.SDUID, up.UserName);
                    });
                    userpositions(mappedData);
                });
            };
        }

        //set up the viewmodel
        var viewModel = new overallTablesViewModel();
        ko.applyBindings(viewModel, $("#overallTablevm")[0]);
    });
});

我的示例是使用点击事件，但您可以将其去掉。可以看到ViewModel调用了url，返回的json构建了observableArray的userposition。

然后视图将有一个属性userpositions 来保存数据。

【讨论】：

【解决方案2】：

我会使用 Knockout 模板，详细信息请参见 template binding 文档。基本方法是获取当前绑定到 AJAX 调用结果的 HTML，并将其移动到模板中。

然后，您在顶级视图模型上有一个属性，它是您通过 AJAX 调用获得的 JSON 结果：

<div data-bind="template: { name: 'my-template', data: myAjaxResponse}"></div>

【讨论】：

我不明白这是如何解决问题的？

【解决方案3】：

问题又来了，又重新找了。

我发现这个rather good knockout tips page 如果你向下滚动到“未定义的属性”，它建议在参数前加上“$data”。

引用“在 JavaScript 中，尝试检索未定义变量的值是错误的，但可以访问另一个对象的未定义属性”

感谢您的帮助，但这是一个几乎看不见的轻量级修复。

【讨论】：