从Knockout中的AJAX调用映射JSON

时间:2014-01-08 14:35:47

标签: knockout.js mapping

我开始使用Knockout Mapping,我错过了一些明显的东西?

当进行AJAX调用时,绑定失败,因为尚未返回数据。 One way around that是设置一个空的JSON响应来预先设置viewmodel,但对我来说这似乎不对。如果可以删除对初始空JSON对象的要求,那就太好了。

有这个方法吗?写这个我开始认为延迟绑定直到第一个JSON查询返回后。

感谢

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

问题再次出现,并重新搜索。

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

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

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