在函数内部使用 AJAX 绑定可观察数组

Question

我正在使用 Knockout.js。我有这样的功能：

function deviceGroupItem(item) {
    this.DeviceGroupName = item.DeviceGroupName;
    this.groupDevicesVisible = ko.observable(false)
    this.groupDevicesArray = ko.observableArray();
    this.deviceGroupClick = function () {
        if (this.groupDevicesVisible() == false) {
            this.groupDevicesVisible(true)
            $.ajax({
                url: returnServer() + '/api/Mobile/getRoomDevices?accessToken=' + localStorage.getItem('Token'),
                type: "GET",
                dataType: "json",
                success: function (data) {
                    this.groupDevicesArray()($.map(data, function (item) {
                        return new roomDeviceItem(item);
                    }))
                },
                error: function () {

                }
            })
        } else {
            this.groupDevicesVisible(false)
        }
    }
    return this;
}

问题是，当我尝试绑定时：

this.groupDevicesArray = ko.observableArray();

使用：

this.groupDevicesArray()($.map(data, function (item) {
                        return new roomDeviceItem(item);
                    }))

我收到错误 "this.groupDevicesArray is not a function"。老实说，我不知道如何以正确的方式做到这一点。你知道我怎样才能做到吗？

Answer 1

尝试

this.groupDevicesArray($.map(data, function (item) {
  return new roomDeviceItem(item);
}));

groupDevicesArray 是 observableArray，$.map returns 是一个数组。

Answer 2

问题是因为您在函数 deviceGroupClick 中引用了带有 this 的可观察数组，该数组不存在，因为 this 引用了当前上下文。

This technique depends on current closure which is a pseudo variable that may differ from scope to scope dynamically .

viewModel:

function roomDeviceItem(data) {
    this.room = ko.observable(data.room)
}

function deviceGroupItem() {
    var self=this; //Assign this to self & use self everywhere
    self.groupDevicesArray = ko.observableArray();
    self.deviceGroupClick = function () {
        $.ajax({
            url: '/echo/json/',
            type: "GET",
            dataType: "json",
            success: function (data) {
                data = [{
                    'room': 'One'
                }, {
                    'room': 'Two'
                }]
                self.groupDevicesArray($.map(data, function (item) {
                    return new roomDeviceItem(item);
                }))
            }
        });
    };
};
ko.applyBindings(new deviceGroupItem());

工作样本here

以防万一，如果您正在寻找 this 的解决方案，您需要使用 bind(this) 来获取外部闭包检查的参考 here

在函数内部使用 AJAX 绑定可观察数组

Bind observable array using AJAX inside function

javascript

knockout-mapping-plugin

knockout.js