可观察阵列不显示阵列中的所有项目

我有一个knockout 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。

来源

2014-09-26 theDarse

GetCustomerUsers的代码是什么？ – azurelogic 2014-09-26 15:45:57

我将添加代码，但它只是一个简单的ajax调用 – theDarse 2014-09-26 15:49:03

您的[代码对我来说工作正常]（http://jsfiddle.net/zzssvqqu/1/）。请编辑您的问题，并确保我们可以使用它来[repro]（http://sscce.org）该问题。 – Jeroen 2014-09-26 20:34:44

好吧我真的找到了解决这个问题的方法。取而代之的填充数据，因为我的文档之后添加它构造的一部分是准备

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

我要抛出一个理论，作为对什么是真正发生的事情，请随时告诉我，我错了，但解决方案确实有效。

我认为正在发生的事情是数据正在视图模型构造函数中填充。但是因为这个调用是一个同步调用，构造函数在数据填充之前还没有完成。那么应用绑定函数被调用，但是因为在应用绑定函数返回之前数据是预先通过的，所以已经在对象中的数据被忽略，因为它没有可观察的变化。在正常的异步操作期间，构造函数完成调用，然后应用apply绑定函数，然后数据返回并更改observable，导致事件标志更新视图。

来源

2014-09-29 13:31:24 theDarse

你应该做的是在构造函数中创建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); })); } 
    }); 
}

来源

2014-09-27 12:56:29 Svakinn

可观察阵列不显示阵列中的所有项目

回答

相关问题