Magento2 theme mini cart KO templating issue

Question

I have issues with Magento2 theme mini cart KO templating issue.

I have been trying to create a realtime mini cart dropdown in my header and having issue with its data rendering. I tried KO templating but for some reasons my code doesn't works, therefore I had added the number of cart items using PHTML behavior.

But problem with PHTML behavior is that we can't overcome with Magento FPC cache on page rendering.

Any help in initiating and replacement for KO mini cart is very helpful.

I have code publically accessible on github here: https://github.com/OrviSoft-Inc/magento2-bootstrap-theme

Fix or replacement I am seeking for is here: https://github.com/OrviSoft-Inc/magento2-bootstrap-theme/blob/master/app/design/frontend/MyTheme/default/Magento_Theme/templates/cart.phtml

My Cart template referred above looks like this

<?php
$helper = $this->helper('\Magento\Checkout\Helper\Cart'); 
?>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class="right-header" data-mage-init='{"babyTalker": {}}'><a href="/" class="icon-home"><i class="fas fa-home"></i></a><span class="icon-search searchShow"></span><a href="/customer/account/" class="icon-user"></a><a href="/checkout/cart/" class="icon-basket"><span><?php  echo $helper->getItemsCount(); ?></span></a></div>
<div class="mini-search-form" id="add_data" style="display:none;">
    <form action="/catalogsearch/result" method="get">
        <input type="text" name="q" Placeholder="Search"/>
        <button class="btn btn-primary mini-search" type="submit">Search</button>
    </form>
</div>
<script>
require(['jquery'], function ($) {
    $(document).ready(function () {
        $('.searchShow').click(function(){
            $('#add_data').toggle('slow');
        });     
    });
});
</script>

Answer 1

After spending some time, I found that KO template usage with the help of core theme and the final fix was with following code.

    <div class="block block-minicart empty"
         data-role="dropdownDialog"
         data-mage-init='{"dropdownDialog":{
            "appendTo":"[data-block=minicart]",
            "triggerTarget":".showcart",
            "timeout": "2000",
            "closeOnMouseLeave": false,
            "closeOnEscape": true,
            "triggerClass":"active",
            "parentClass":"active",
            "buttons":[]}}'>
        <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
            <!-- ko template: getTemplate() --><!-- /ko -->
        </div>
        <?= $block->getChildHtml('minicart.addons') ?>
    </div>

Note the data-mage-init section. And the <!-- ko template: getTemplate() --><!-- /ko --> section

And than loading relevant js was helpful as below.

<script type="text/x-magento-init">
    {
        "[data-block='minicart']": {
            "Magento_Ui/js/core/app": <?= /* @escapeNotVerified */ $block->getJsLayout() ?>
        },
        "*": {
            "Magento_Ui/js/block-loader": "<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>"
        }
    }
</script>