녹아웃과 함께 테이블의 내부 배열을 바인딩하는 방법

Question

업데이트 : 가장 중요한 정보를 잊어 버린 것 같습니다. 이것은 HTML 파일이 아니고 xsl 파일에 있습니다. ko 주석 태그가 제거되어 '이름'이 존재하지 않는 이유가 있습니다. JSFiddle을 통해 올바른 방향으로 나를 인도 해 준 데미안의 답변을 답으로 표시 할 것입니다. 감사.

원래 질문 :

knockout.js와 테이블에 JSON 객체에서 내부 배열을 바인딩 할 수있는 방법이 있나요? 나는 여러 가지 방법으로 시도했지만, 그 중 누구도 일하는 것 같지 않습니다.

Knockout Array of Arrays

Binding Nested Array Using Knockout foreach

그러나, 두 경우 모두가 바인딩 컨테이너를 사용하는 두 개의 유사한 질문이 있습니다. 컨테이너가없는 바인딩을 사용해야하는데 작동하지 않는 것 같습니다.

 
var viewModel = function() { 
     var self = this; 
     self.reportData = ko.observableArray(); 
    } 

var vm = new viewModel(); 
vm.reportData(data); 
ko.applyBindings(vm); 

내가해야 할 것은 :

 
<tbody data-bind="foreach: reportData"> 
    <tr> 
     <td data-bind="text: Category"></td> 
    </tr> 
    <!-- ko foreach: Items --> 
    <tr> 
     <td data-bind="text: Name"></td> 
    </tr> 
    <!-- /ko --> 
</tbody> 

나는 많은 시도했다

 
var reportData = {[ 
    "Category": "First Category", 
    "Id": 1, 
    "Items": [ 
     {"Name": "First Name"}, 
     {"Name": "Second Name"} 
     ] 
    }, { 
    "Category": "Second Category", 
    "Id": 2, 
    "Items": [ 
     {"Name": "First Name"}, 
     {"Name": "Second Name"} 
     ] 
    }]; 

바인딩 코드 (발췌) 기본입니다 : 여기

는 단순화 된 코드 예제입니다 내부 배열 데이터를 가져 오는 다른 방법이 있지만 'Name'이 정의되지 않은 오류가 항상 발생합니다. 나는 콘솔에서 올바른 데이터를 얻었음을 확인하고 외부 객체 배열 값은 문제없이 표시됩니다.

이 내부 배열에 액세스하고 내부 배열에 컨테이너없는 바인딩이있는 테이블에 표시하는 올바른 방법은 무엇입니까?

Answer 1

this fiddle을보고 무엇이 작동하지 않는지 알려주세요. 나를 위해 그것이 잘 작동하기 때문에.

보기 :

<table> 
    <tbody data-bind="foreach: reportData"> 
     <tr> 
      <td data-bind="text: Category"></td> 
     </tr> 
     <!-- ko foreach: Items --> 
     <tr> 
      <td data-bind="text: Name"></td> 
     </tr> 
     <!-- /ko --> 
    </tbody> 
</table> 

JS :

data = [{ 
     "Category": "First Category", 
      "Id": 1, 
      "Items": [{ 
      "Name": "First Name" 
     }, { 
      "Name": "Second Name" 
     }] 
    }, { 
     "Category": "Second Category", 
      "Id": 2, 
      "Items": [{ 
      "Name": "First Name" 
     }, { 
      "Name": "Second Name" 
     }] 
    }] 
; 


var viewModel = function() { 
    var self = this; 
    self.reportData = ko.observableArray(); 
} 

var vm = new viewModel(); 
vm.reportData(data); 
ko.applyBindings(vm);