foreach 내의 foreach, 두 개의 테이블, Knockout.js

Question

여기 상황이 있습니다. 나는 두 개의 테이블이 있습니다

MSSQL을

제품

ProductId | ProductName 
__________|____________ 
     1 | iPhone5 
     2 | iPhone6 
     3 | iPhone6s 

이미지

Id | ImagePath  | ProductId 
___|__________________|___________ 
1 | /images/231.jpg | 2 
2 | /images/432.jpg | 2 
3 | /images/111.jpg | 1 

내 녹아웃 :

<div data-bind="foreach: Products"> 
    <div data-bind="text: ProductName"> 
     <div data-bind="foreach: Images> 
     <img data-bind="attr:{src: ImagePath}" /> 
     </div> 
    </div>   
</div> 

,

그래서 각 제품의 모든 이미지를 얻고 싶습니다. 두 테이블을 하나의 Json으로 병합해야합니까? 그리고 외부 루프에서 ID를 얻으려면 어떻게해야합니까? 감사!

p.s. 도움이된다면 asp.net을 사용하고 있습니다.

Answer 1

다음과 같은 방법을 시도해 볼 수 있습니다. 다음 발췌 문장을 기반으로, 나는 products이 ajax 호출의 피드가 될 것이라고 생각합니다. 그것은 당신이 그에 상응하여이 부분을 변경해야한다고 말하고 있습니다. 본질적으로, 당신이 아약스를 호출하면 제품 배열이되고 각 제품에는 적어도 이름과 이미지 배열이 있어야합니다 (이 제품에 이미지가 없으면 빈 배열). 외관상으로는, 당신이 당신의 응답에 원하는 다른 어떤 정보든지 추가 할 수 있었다. 따라서 아래에 선언 된 함수 인 Image과 Product을 약간 조정해야합니다.

var Image = function(name){ 
 
    this.name = name; 
 
}; 
 

 
var Product = function(name, images){ 
 
    this.name = name; 
 
    this.images = images; 
 
}; 
 

 
var viewModel = { 
 
    products: [ 
 
    new Product("iPhone5", [new Image("/images/111.jpg")]), 
 
    new Product("iPhone6", [new Image("/images/231.jpg"),new Image("/images/432.jpg")]), 
 
    new Product("iPhone6s", [new Image("/images/444.jpg")]) 
 
    ] 
 
}; 
 

 
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div data-bind="foreach: products"> 
 
    <div data-bind="text: name"> </div> 
 
     <ul data-bind="foreach: images"> 
 
     <li data-bind="text: name"></li> 
 
     </ul> 
 
</div>

Answer 2

$parent을 사용하면 하나의 스코프 수준까지 액세스 할 수 있습니다. 따라서 내부 루프에서 상위 항목을 사용하여 루프중인 현재 항목에 액세스 할 수 있습니다. Products