Question

我正在尝试使用knockout将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>

Answer 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：

enter image description here

打开浏览器的开发者工具 - 最好是Firefox，Chrome或Safari
转到元素面板（＆＃34; Inspector＆＃34;在Firefox中）并显示控制台（按＆＃34; ESC＆＃34;）
选择你想知道Knockout绑定的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

淘汰Json数据绑定问题

1 个答案: