2

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.


result 1


result 2

2

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.

| improve this answer | |
  • i know, i removed exclamation from the code as stack overflow code editor was commenting my code. – summu Dec 27 '19 at 10:07
  • 1
    @summu Ok. Did you try to use a closing tag? – Siarhey Uchukhlebau Dec 27 '19 at 10:08
  • i dont know how you wrote the code with <!-- /ko --> , wait lemme try :D – summu Dec 27 '19 at 10:08
  • @summu Try to update template using code from my answer – Siarhey Uchukhlebau Dec 27 '19 at 10:13
  • 1
    @summu I was glad to help :) – Siarhey Uchukhlebau Dec 27 '19 at 10:15

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.