0

I am trying to initialize the knockout component in the admin html area, the respective code is below.

phtml file to initialize ko template

<?php
/**
 * @var \JC\ChatSupport\Block\Adminhtml\ChatList $block
 */
?>
<div id="chatlist" class="chatlist" data-bind="scope:'chatlist'">
    <!-- ko template: getTemplate() --><!-- /ko -->
    phtml
    <script type="text/x-magento-init">
    {
        "#chatlist": {
            "Magento_Ui/js/core/app": {
               "components": {
                    "chats": {
                        "component": "JC_ChatSupport/js/component/chatlist",
                        "template" : "JC_ChatSupport/chatlist"
                    }
                }
            }
        }
    }
    </script>
</div>

js component file

define([
        'jquery',
        'uiComponent',
        'ko'
    ], function ($, Component, ko) {
        'use strict';

    return Component.extend({
        initialize: function () {
            this._super();
            console.log("hello, this is loading");
        },
    });
    }
);

html template file

<div>
    Here this content is not loading
</div>

Here my problem is the content in html template file is not rendering in the page.

1

Please update your phtm and JS component file as follow

1) phtml file

<div id="chatlist" class="chatlist" data-bind="scope:'chatlist'">
    <!-- ko template: getTemplate() --><!-- /ko -->
    phtml


<script type="text/x-magento-init">
{

    "*": {

        "Magento_Ui/js/core/app": {            
            "components": {

                "chatlist": {
                      "component": "JC_ChatSupport/js/component/chatlist",

                }

            }
        }
    }
}
</script>

</div>

2) Js File

define([
        'jquery',
        'uiComponent',
        'ko'
    ], function ($, Component, ko) {
        'use strict';

    return Component.extend({
        defaults: {
                template: "JC_ChatSupport/chatlist"
        },
        initialize: function () {
            this._super();
            console.log("hello, this is loading");
        },
    });
    }
);

Refresh the cache and check

| improve this answer | |
  • Yes, it is a typo =P I wrote "chat" instead "chatlist" under component in phtml file. Anyways thanks for the answer. :) – Jaya chandra Mar 30 at 14:36

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.