0

I am trying to render a new KO component within a existing KO template. I have a PackagePopup component which in the template, renders a PackageFfilter component. I would like to seperate the logic for the filters from the js logic for the items.

PackagePopup template:

<div class="content-container">
<section class="pp-grid-filters">
    <!-- ko component: {name:"package-filters-3"} -->  **<-- hardcoded id for testing purposes**
    <!-- /ko -->
</section>
<section class="pp-grid-container" data-bind="foreach: packageItems()" >
        <!-- ko template: { name: 'Company_ProductPackage/packageitem' } -->
        <!-- /ko -->
</section>

What this looks like:

enter image description here

Eventually, i also want to communicate between the two viewmodels.

In the magento template, i try to instantiate the component like this (i have the popup working):

    <script type="text/x-magento-init">
    {
        "#product-package-modal-<?=$productPackage->getId();?>":{
            "Magento_Ui/js/core/app":{
                "components":{
                    "package-popup-<?=$productPackage->getId();?>":{
                        "component": "Company_ProductPackage/js/packagepopup",
                        "template" : "Company_ProductPackage/packagepopup",
                        "productPackage" :  <?= /* @escapeNotVerified */ $block->getProductPackageJson($productPackage); ?>,
                        "store_id" : <?=$block->getCurrentStoreId();?>,
                        "mainproduct_id" : <?=$block->getCurrentProductId();?>
                    },
                    "package-filters-<?=$productPackage->getId();?>":{
                        "component": "Company_ProductPackage/js/packagefilter",
                        "template" : "Company_ProductPackage/packagefilter",
                        "productPackageId" :  <?= /* @escapeNotVerified */ $productPackage->getId() ?>,
                        "store_id" : <?= $block->getCurrentStoreId();?>,
                        "mainproduct_id" : <?= $block->getCurrentProductId();?>
                    }
                }
            }
        }
    }
</script>

Id's are added to the component names because there can be more instances of the same component on a page.

Witgt he above setup, knockout gives the following error

knockout.js:3993 Uncaught Error: Unknown component 'package-filters-3'

This must have something to do with the way magento handles components, but i can't really find out why. Any suggestions?

0

Got it working:

    <section class="pp-grid-filters" data-bind="scope:'package-filters-3'">
    <!-- ko template: getTemplate() --><!-- /ko -->
</section>

Even in knockout templates, the Magento specific scope databind works.

Then the getTemplate is enough to do the trick.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.