Проблема привязки данных Knockout Json

Я пытаюсь связать данные Json с пользовательским интерфейсом, используя нокаут, но в пользовательском интерфейсе ничего не привязывается. ниже приведена ссылка, по которой я пытаюсь связать данные 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
person user3772857    schedule 22.09.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

У вас есть ошибка, потому что вы написали с ошибкой self.GetMtDyta. Используйте консоль инструментов разработчика браузера для поиска ошибок, которые мог вызвать ваш код.

Вторая проблема заключается в том, что myTestData не содержит того, что вы думаете: в self.myTestData.push(processedResults()) кажется, что вы хотите добавить новые объекты test в массив. Вместо этого вы добавляете сам наблюдаемый массив к myTestData.

Попробуйте это вместо этого:

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

Обновлен plnkr

Хорошим способом отладки подобных проблем является ko.dataFor:

введите здесь описание изображения

  • откройте инструменты разработчика вашего браузера — предпочтительно Firefox, Chrome или Safari
  • перейти на панель элементов ("Инспектор" в Firefox) и показать консоль (нажать "ESC")
  • выберите элемент DOM, для которого вы хотите узнать привязку Knockout — в данном случае наш <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
person janfoeh    schedule 22.09.2014
comment
Это не ответ, а комментарий. - person Ilya Luzyanin; 22.09.2014
comment
@IlyaLuzyanin, вы, конечно, правы - я не проверял свой ответ и пропустил второй вопрос. Я исправил ответ - спасибо за внимание! - person janfoeh; 22.09.2014