Knockout.js數據未顯示在表

我已誠實地嘗試自己解決它。這是一個非常簡單的嘗試，但我無法使它工作！現在，請在這裏問我的問題。Knockout.js數據未顯示在表

問題：可觀察數據不顯示在表中。

@using (Ajax.BeginForm("GetSubscriptionInfo", new AjaxOptions 
     { 
      HttpMethod = "POST", 
      OnSuccess = "ListsReceived" 
     }))

從服務器獲取數據，這裏是名單：

data: "[{"ListID":1,"ListName":"one list ","ListDescription":"one list description","OptIn":true},{"ListID":2,"ListName":"two list ","ListDescription":"two list description","OptIn":false},{"ListID":3,"ListName":"three list ","ListDescription":"three list description","OptIn":true},{"ListID":4,"ListName":"four list ","ListDescription":"four list description","OptIn":false},{"ListID":5,"ListName":"five list ","ListDescription":"five list description","OptIn":false},{"ListID":6,"ListName":"six list ","ListDescription":"six list description","OptIn":false}]"

在我的頁面的底部我有回調函數和數據結構的定義：

<script type="text/javascript"> 
     function ListsReceived(data) 
     { 
      PageViewModel.subscriberLists = ko.mapping.fromJSON(data); 
     } 

     function PageViewModel() { 
      var self = this; 
      self.subscriberLists = ko.observableArray([]); 
     }; 

     ko.applyBindings(new PageViewModel()); 
    </script>

現在，我的表格：

<table class="table table-hover"> 
       <caption class="text-left">Subscription lists and status:</caption> 
       <tr> 
        <th>Name</th> 
        <th>Description</th> 
        <th>Opt In</th> 
       </tr> 
       <tbody data-bind="foreach: subscriberLists()"> 
        <tr> 
         <td data-bind="value: ListName"></td> 
         <td data-bind="value: ListDescription"></td>       
         <td data-bind="checked: OptIn"></td>       
        </tr> 
       </tbody> 
      </table>

我在這裏做錯了什麼？感謝幫助。

來源

2013-12-13 HotFrost

試試這個

<script type="text/javascript"> 
     function ListsReceived(data) 
     { 
      PageViewModel.subscriberLists = ko.mapping.fromJSON(data); 
      ko.applyBindings(new PageViewModel()); 
     } 

     function PageViewModel() { 
      var self = this; 
      self.subscriberLists = ko.observableArray([]); 
     };  
</script>

如果有與您的AJAX調用任何錯誤，你是在你的ListsReceived函數獲取數據回來，然後撥打電話到ko.applyBindings數據映射完成之後。在ListsReceived之前調用ko.applyBindings的可能性很大，並且數據映射已完成。

來源

2013-12-13 23:17:19 rwisch45

不，沒有幫助.. 我在這裏正確地做了映射： PageViewModel.subscriberLists = ko.mapping.fromJSON（data）;？ – HotFrost

在第一個示例中，您將subscriberLists聲明爲「靜態」變量，該變量未爲此對象的實例聲明。這就是爲什麼數據不在PageViewModel的情況下當您撥打ListsReceived時。

但是，在第二個示例中，使用litaral對象語法時創建了ViewModel的對象實例。因此，在調用ProcessListsReceived時，您將數據傳遞給ViewModel的對象實例。

這就是爲什麼你的第二個例子工作，第一個沒有。然而

這樣的聲明PageViewModel將是一個更簡潔的方法：

function PageViewModel() { 

    this.subscriberLists = ko.observableArray([]); 
    self = this; 

    this.ListsReceived = function (data) { 
     this.subscriberLists = ko.mapping.fromJSON(data); 
     ko.applyBindings(self); 
    }; 
} 

var someData = []; //some JSON Data 
var pageViewModel = new PageViewModel(); 
pageViewModel.ListReceived(someData);

這樣subscriberLists是PageViewModel的公共屬性。在將數據傳遞給ListsReceived時，subscriberLists將獲得數據並且綁定將被刷新。

來源

2013-12-15 12:55:41

好的，首先，感謝您的建議。但是我想堅持在我的模型中的對象文字聲明..看來，你知道你周圍的淘汰賽的方式，所以可能你知道爲什麼我已經更新我的$ ajax.beginform部分中的observablearray： function ProcessListsReceived （data）{ViewModel.SubscriberLists（ko.mapping.fromJSON（data））; } 我還有ViewModel.SubscrriberLists（）。length = 0 ??謝謝！ – HotFrost

Knockout.js數據未顯示在表

回答

相關問題