2016-07-30 19 views
1

ここに状況があります。foreach内のForeach、2つのテーブルKnockout.js

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> 
私は2つのテーブルを持っています

だから、私は各製品のすべての画像を取得したいと思います。 2つのテーブルを1つのJsonにマージして、外側のループからIDを取得するにはどうすればよいですか?ありがとう!

p.s.私はそれが役立つ場合asp.netを使用しています。

答えて

1

次のようなものを試すことができます。次のスニペットに基づいて、私はproductsがajax呼び出しからのフィードであると考えます。それに応じて、この部分を変更する必要があると言われています。本質的に、あなたはajax呼び出しが返すものは一連の製品であり、各製品は少なくとも名前と画像の配列を持たなければなりません(この製品に画像がない場合は空の配列)。どうやら、あなたが望むその他の情報をあなたの応答に加えることができます。したがって、以下で宣言されている関数、すなわちImageProductを微調整する必要があります。

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>

+0

グレート!私が探していたもの。ありがとう。 –

+0

@IgorLevashovようこそ!私は喜んで私が助けた:) – Christos

1

$parentを使用すると、1つのスコープレベルまでアクセスできます。したがって、内側のループから、親を使用して現在のループ中のアイテムにアクセスすることができますProducts