넉 아웃 Json 데이터 바인딩 문제

knockout을 사용하여 Json 데이터를 UI에 바인딩하려고하지만 UI에 아무 것도 바인딩하지 않습니다. 아래 링크는 json data.Browser를 바인드하려고 할 때 오류를 표시하지 않습니다. 내가 여기서 누락 된 것을 도울 수 있니? 당신이 self.GetMtDyta을 맞춤법이 틀린 때문에넉 아웃 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

당신이 할 은 오류가 있습니다. 브라우저 개발자 도구 콘솔을 사용하여 코드에서 발생할 수있는 오류를 찾으십시오.

두 번째 문제는 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
은 (파이어 폭스에서 "관리자") 요소 패널로 이동하여
당신이 넉 아웃이 바인딩을 알고 싶은 DOM 요소 선택 콘솔 (보도 "ESC") 표시 -이 경우를 우리 <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

이것은 답변이 아니라 주석입니다. –

@IlyaLuzyanin 당신은 당연한 것입니다 - 나는 내 대답을 테스트하지 않았고 두 번째 문제를 놓쳤습니다. 나는 해답을 수정했다. – janfoeh

넉 아웃 Json 데이터 바인딩 문제

답변

관련 문제