KnockoutJS - 當陣列更新

我創建這裏的問題的一個例子沒有更新表：KnockoutJS - 當陣列更新

我實際的代碼是掛接到ASP.NET Web方法，因此示例代碼已經調整指向一個公共Web服務來演示。

基本上，我有一個數組，我綁定，但是在ajax調用後，表不顯示更新的信息。我不確定我錯過了什麼，我首先想到了我需要的地圖插件，所以我試過了，但我還沒有到任何地方。

當然，我不打算在每次數據更改時應用綁定。

[編輯]

的JavaScript下面：下面

var ViewModel = function() { 
var self = this; 
self.items = ko.observableArray([]); 
self.refresh = function() { 
    $.ajax({ 
     type: "POST", 
     url: "http://api.wipmania.com/json", 
     data: "{}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (data) { 
      ko.mapping.fromJS(data.d, self.items.address); 
     } 
    }); 
}; 
} 

var viewModel = new ViewModel(); 
$(function() { 
ko.applyBindings(viewModel); 
viewModel.refresh(); 
});

HTML：

<table data-bind="visible:items.length > 0"> 
<thead> 
    <tr> 
     <th>Country</th> 
     <th>Code</th> 
    </tr> 
</thead> 
<tbody data-bind="foreach: items"> 
    <tr> 
     <td data-bind="text:country"></td> 
     <td data-bind="text:country_code"></td> 
    </tr> 
</tbody> 
</table>

來源

2012-03-29 JustinN

對不起，我用來粘貼我的代碼，但後來被要求提供JSFiddle的例子。我現在將包括兩個。 - 編輯和修復。 – JustinN 2012-03-29 09:16:49

你在這行裏有'.address'是什麼？ 'ko.mapping.fromJS（data.d，self.items.address）;' – Niko 2012-03-29 09:29:53

好的交易。是的，複製和粘貼是最好的（令人驚訝的是人們重新輸入的頻率 - 然後引入無關的錯誤！）和現場鏈接作爲*附件*（我更喜歡http://jsbin.com，但這是一個品味問題）非常棒。 – 2012-03-29 09:31:41

看看這個小提琴：http://jsfiddle.net/Gm7zH/1/所有的

首先我使用的，因爲跨域請求僞造AJAX數據。這是我從服務器獲得的數據。並使用setTimeout來模擬異步請求。

然後你做了一些錯誤的：

您嘗試映射到陣列的物業地址不存在。其次，結果的地址只是一個對象，所以我將它包裝在一個數組中以使其工作。

然後，您嘗試映射到現有的observableArray，但提供數組作爲第二個參數，第二個參數是映射選項，第三個是正確的位置。在我的例子中，我將null作爲映射選項。

最後，爲了讓表格可見，你說items.length> 0.你想要的是items（）。length> 0這是底層數組的長度。

來源

2012-03-29 09:48:29

非常感謝Martin提供的修正示例和示例，我用它來糾正我的代碼，並且它現在工作得非常好！對於我提出的最初問題中出現的可怕例子，我向所有人表示歉意，我將在未來嘗試提交更清晰的樣品。 – JustinN 2012-03-29 10:00:31

你的陣列是self.items，但你的Ajax success呼叫更新self.items.address，我猜是undefined。所以映射插件正在創建一個新的模型，與原始模型無關。

（您還沒有表現出什麼看起來像data.d，但我假設它是一個數組。）

當然我每次我的數據改變我並不意味着applyBindings？

正確。你這樣做了一次，然後更新observables應該（一切正常）更新DOM。

來源

2012-03-29 09:33:06

它看起來像我的例子，我掀起了展示我的問題有自己的一些問題。地址應該在data.d.address上，而不是self.items - 對於混淆的道歉，但是這個問題並不倖存在。 – JustinN 2012-03-29 09:47:42

KnockoutJS - 當陣列更新

回答

相關問題