Ggtkuk

My site is a market place site where vendors(sellers can sell their product).

Now i want to customize the to group items in cart by each vendor like this:
http://prntscr.com/hmsam6

checkout_index_index.xml

<item name="cart_groups" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/cart-groups</item>
<item name="children" xsi:type="array">
 <item name="cart_items" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/cart_groups/cart-items</item>
 <item name="children" xsi:type="array">
 <item name="details" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details</item>
 <item name="children" xsi:type="array">
 <item name="thumbnail" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/thumbnail</item>
 <item name="displayArea" xsi:type="string">before_details</item>
 </item>
 <item name="subtotal" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/subtotal</item>
 <item name="displayArea" xsi:type="string">after_details</item>
 </item>
 </item>
 </item>
 </item>
 </item>
</item>

cart-group.js

define([
'ko',
'Magento_Checkout/js/model/totals',
'uiComponent',
'Magento_Checkout/js/model/step-navigator',
'Magento_Checkout/js/model/quote'], function (ko, totals, Component, stepNavigator, quote) 
'use strict';

return Component.extend(
 defaults: 
 template: 'Magento_Checkout/summary/cart-groups'
 ,
 groups: window.checkoutConfig.quoteItemData,
 getGroups:function()
 var tempGroups = this.groups;
 var arr = Object.keys(tempGroups).map(function (key) return tempGroups[key]; );

 return arr;
 ,
 /**
 * Returns bool value for items block state (expanded or not)
 *
 * @returns *
 */
 isItemsBlockExpanded: function () stepNavigator.isProcessed('shipping');
 ,
 /**
 * Returns cart items qty
 *
 * @returns Number
 */
 getItemsQty: function () 
 return parseFloat(this.totals['items_qty']);
 ,

 /**
 * Returns count of cart line items
 *
 * @returns Number
 */
 getCartLineItemsCount: function () 
 return parseInt(totals.getItems()().length, 10);
 ,
););

cart-group.html

<div class="block items-in-cart"
 data-bind="mageInit: 'collapsible':'openedState': 'active', 'active': isItemsBlockExpanded()">
<div class="title" data-role="title">
 <strong role="heading">
 <translate args="'Item in Cart'" if="getCartLineItemsCount() === 1"/>
 <translate args="'Items in Cart'" if="getCartLineItemsCount() > 1"/>
 </strong>
</div>
<div class="content minicart-items" data-role="content">
 <div class="minicart-items-wrapper overflowed">
 <each args="getGroups()">
 <p class="checkout-vendor-shop-name" data-bind="text: vendor_shop_name"></p>
 <!-- ko foreach: $parent.elems() -->
 <!-- ko template: getTemplate() --><!-- /ko -->
 <!-- /ko -->
 </each>
 </div>
</div>

The problem is here:

 <each args="getGroups()">
 <p class="checkout-vendor-shop-name" data-bind="text: vendor_shop_name"></p>
 <!-- ko foreach: $parent.elems() -->
 <!-- ko template: getTemplate() --><!-- /ko -->
 <!-- /ko -->
 </each>

How can i pass data to child template with each data in this loop: getGroups() array. Right now it is all the data in quote, and it is duplicated 2 times

https://stackoverflow.com/questions/20430976/can-i-pass-a-variable-in-a-template-binding

So something like this:

<div data-bind="foreach: getGroups">
 <p class="checkout-vendor-shop-name" data-bind="text: vendor_shop_name"></p>
 <!-- ko foreach: $parent.elems() -->
 <!-- ko template: name: getTemplate(), templateOptions: myvar: $data --><!-- /ko -->
 <!-- /ko -->
</div>