How to call knockout functions from html (Magento 2)

Question

I have functions defined in my knockout js,

define([
    'Magento_Ui/js/form/form',
    'ko'
], function (Component, ko) {
    'use strict';

    function viewedProducts() {
        let rvp = JSON.parse(window.localStorage.getItem("viewed_recently_products"));
        return Object.values(rvp);
    }

    function initYXProductsCarousel() {
        YX_UI_UTIL.initYXProductsCarousel('#rv-content .yx-products-carousel');
    }

    function initRecentlyProductsLocalStorage() {
        console.log("in initRecentlyProductsLocalStorage ");
        if (!(localStorage.getItem("viewed_recently_products"))) {
            localStorage.setItem("viewed_recently_products", YX_UI_UTIL.pageVariables.newRecentlyProducts);
        } else {
            localStorage.setItem("viewed_recently_products", YX_UI_UTIL.pageVariables.oldRecentlyProducts);
        }
    }

    return Component.extend({

        recently: viewedProducts,
        rvCarousel: initYXProductsCarousel,
        rvStorage: initRecentlyProductsLocalStorage,
        initialize: function () {
            this._super();
        },
    });
});

and I want to call rvStorage function first and rvCarousel at the end of html.

I tried this code (Html content):

 <-- ko $parent.rvStorage() -->

 <-- ko foreach: { data: recently(), as: 'productView' } -->
 <li class="product-item" >
 </li>
 <--/ko-->
 <--ko $parent.rvCarousel() -->

and this too:

<-- ko rvStorage() -->
<-- ko foreach: { data: recently(), as: 'productView' } -->
     <li class="product-item" >
     </li>
<--/ko-->
<--ko rvCarousel() -->

But both of them don't work.

---

---

Answer 1

I think a ko tags must be closed, like:

<!-- ko rvStorage() --><!-- /ko -->
    <!-- ko foreach: { data: recently(), as: 'productView' } -->
         <li class="product-item" >
         </li>
    <!-- /ko -->
<!-- ko rvCarousel() --><!-- /ko -->

and must look like <!-- ko --><!-- /ko -->

From the docs:

The and comments act as start/end markers, defining a “virtual element” that contains the markup inside. Knockout understands this virtual element syntax and binds as if you had a real container element.