淘汰赛Json数据绑定问题答案

【问题标题】：Knockout Json data binding issue淘汰赛Json数据绑定问题
【发布时间】：2014-09-22 20:45:48
【问题描述】：

我正在尝试使用敲除将 Json 数据绑定到 UI，但我一直在 UI 中没有任何绑定。下面是我正在尝试绑定 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>

【问题讨论】：

标签： data-binding knockout.js

【解决方案1】：

你确实有一个错误，因为你拼错了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：

打开浏览器的开发工具 - 最好是 Firefox、Chrome 或 Safari
转到元素面板（Firefox 中的“Inspector”）并显示控制台（按“ESC”）
选择您想知道 Knockout 绑定的 DOM 元素 - 在这种情况下，我们的 <li>
在控制台中，输入ko.dataFor($0)。 $0 总是指当前选中的元素

如您所见，我们没有预期的具有 abc 和 dda 属性的单个对象，而是有一个带有 to 元素的数组 - 这就是 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

【讨论】：

这不是答案，而是评论。
@IlyaLuzyanin 你当然是对的 - 我没有测试我的答案并且错过了第二个问题。我已经修改了答案 - 感谢您的提醒！