Knockout Json數據綁定問題

我想使用挖空將Json數據綁定到UI，但我一直沒有在UI中獲得任何綁定。下面是我試圖綁定一個JSON數據的鏈接。瀏覽器不顯示任何錯誤。你能幫我解決我在這裏失蹤的事嗎？Knockout Json數據綁定問題

http://plnkr.co/edit/z4aQ1bWnqjd8aTDeLOSP?p=preview

<body> 
    <h1>Hello Plunker!</h1> 
    <span data-bind="text: myTestData().length"></span> 
    <ul data-bind="foreach: myTestData"> 
    <li data-bind="text: abc"></li> 
    <li data-bind="text: name"></li> 
    </ul> 
    <script> 
    $(function() { 
     var test = function(data) { 
     var self = this; 
     self.abc = data.ABC; 
     self.name = ko.observable(data.DDA.Name); 
     } 

     var viewModel = function() { 
     var self = this; 
     self.myTestData = ko.observableArray([]); 
     self.GetMyDyta = function() { 
      var processedResults = ko.observableArray([]); 
      $.each(myData, function(index, data) { 
      processedResults.push(new test(data)); 
      }); 
      self.myTestData.pushAll(processedResults()); 
     } 
     } 

     var vm = new viewModel() 
     vm.GetMyData; 
     ko.applyBindings(vm); 
    }); 

    var myData = [{ 
     "ABC": "ABC1234", 
     "DDA": { 
     "Name": "1234.5678", 
     "Number": { 
      "End": 1234, 
      "Start": 5678 
     } 
     } 
    }, { 
     "ABC": "BSP1234", 
     "DDA": { 
     "Name": "1234.5678", 
     "Number": { 
      "End": 1234, 
      "Start": 5678 
     } 
     } 
    }] 
    </script> 
</body>

來源

2014-09-22 user3772857

你做有一個錯誤，因爲你拼錯self.GetMtDyta。使用您的瀏覽器開發工具控制檯來查找您的代碼可能產生的錯誤。

第二個問題是，myTestData不包含你認爲它的作用：在self.myTestData.push(processedResults())，似乎你想追加新的test對象到數組。你正在做的是將可觀察數組本身附加到myTestData。

試試這個：

self.GetMyData = function() { 
    $.each(myData, function (index, data) { 
     self.myTestData.push(new test(data)); 
    }); 
}

Updated plnkr

一個很好的方法來調試這些類型的問題是ko.dataFor：

enter image description here

打開瀏覽器的開發者工具 - 最好是Firefox，Chrome或Safari
去（在Firefox「督察」）的元素面板和顯示控制檯（按「ESC」）
選擇您想要知道的淘汰賽結合的DOM元素 - 在這種情況下，我們的<li>
在控制檯中輸入ko.dataFor($0)。 $0總是指的，而不是用abc單個對象和dda財產，我們預計當前所選元素

正如你可以看到，我們有一個數組到元素 - 這就是爲什麼text: abc綁定失敗控制檯錯誤

Uncaught ReferenceError: Unable to process binding "foreach: function(){return myTestData }" 
Message: Unable to process binding "text: function(){return abc }" 
Message: abc is not defined

來源

2014-09-22 09:44:38 janfoeh

這不是一個答案，而是一個評論。 – 2014-09-22 11:43:17

@IlyaLuzyanin你當然是對的 - 我沒有測試我的答案，錯過了第二個問題。我已經修改了答案 - 謝謝你的支持！ – janfoeh 2014-09-22 12:47:09

Knockout Json數據綁定問題

回答

相關問題