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数据绑定问题

回答

相关问题