knockout template html file in adminhtml area is not rendering
-
13-04-2021 - |
Domanda
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.
Soluzione
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
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a magento.stackexchange