Question

我有一个淘汰赛observableArray绑定到下面的表格。

<table id="Users">
    <thead>
        <tr>
            <td>User Name</td><td>Primary Email</td><td>Product Role</td><td>Active</td><td>EditUser?</td>
        </tr>
    </thead>
    <tbody data-bind="foreach: CustomerUsers">
        <tr>
            <td data-bind="text: UserName"></td>
            <td data-bind="text: PrimaryEmail().EmailAddress"></td>
            <td><select></select></td>
            <td data-bind="text: StaticActiveText"></td>
            <td><a href="#" data-bind ="click: $parent.EditUser">Edit User</a></td>
        </tr>
    </tbody>
</table>

以下视图模型：

function CustomerAdminVm() {
    var vm = this
    this.CustomerUsers = ko.observableArray(GetCustomerUsers());
}

我的问题是，当视图模型最初加载GetCustomerUsers时，它会正确获取所需的值，并将它们插入到可观察数组中。但是，这些元素不会显示在表格中。

奇怪的是，如果我调用以下函数：

this.AddUserToCustomer = function () {
    if (vm.NewUser) {
        vm.CustomerUsers.push(vm.ActiveUser());
    }
    vm.CloseUserModalDialog();
}

用户被添加到数组中，并正确显示在表中。更令人困惑的是，推送中数组的最新值显示了数组中不是显示器的初始值。

有没有人知道造成这种行为的原因是什么？

GetCustomerUsers的代码是：

function GetCustomerUsers() {
    var users = [];
    $.ajax({
        type: 'Get',
        url: ControllerBase + 'Actions/GetAllUsersForCustomer',
        async: false,
        success: function (data) { users = $.map(data, function(item) { return new ObservableUser(item); }); }
    });
    return users;
}

ActiveUser也是ObservableUser。

Answer 1

你应该做的是在构造函数中创建ko变量，然后在数据到达时用ajax值更新它。

function CustomerAdminVm() {
    var vm = this
    this.CustomerUsers = ko.observableArray();
    GetCustomerUsers(this.CustomerUsers);
}

function GetCustomerUsers(getData) {
    $.ajax({
        type: 'Get',
        url: ControllerBase + 'Actions/GetAllUsersForCustomer',
        async: false,
        success: function (data) { getData($.map(data, function(item) { return new ObservableUser(item); })); }
    });
}

Answer 2

好的，我确实为此找到了解决方法。我没有将数据作为构造函数的一部分填充，而是在文档准备好后添加它

function CustomerAdminVm() {
var vm = this
this.CustomerUsers = ko.observableArray();
$(document).read(function(){vm.CustomerUsers(GetCustomerUsers());});
}

我会就实际发生的事情提出一个理论，随时告诉我我错了，但解决方案确实有效。

我认为发生的事情是在viewmodel构造函数中填充数据。但由于调用是同步调用，因此构造函数在填充数据之前未完成。然后调用apply绑定函数，但由于数据在apply bindings函数返回之前已预先准备好，因此忽略了对象中已有的数据，因为它没有可观察到的更改。在正常的异步操作期间，构造函数完成调用，然后应用apply bindings函数，然后数据返回并且observable被更改，从而导致事件标志更新视图。

可观察数组未显示数组中的所有项

2 个答案: