可觀察陣列不顯示陣列中的所有項目

我有一個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

可觀察陣列不顯示陣列中的所有項目

回答

相關問題