How to display html file by knockout js in magento 2 ?

How to display html file by knockout js in magento 2 ?

Knockout is javascript library which is used on frontend in Magento 2. It implements Model-View-View Model (MVVM) design pattern. You can find Knockout in Magento 2 on almost every page. The place where it’s most present is the checkout page. This is the most complicated implementation in Magento 2.

The goal of this post is to explain how to write KO Model-View and View which is valid to use in Magento 2.

We will demonstrate how to implement very simple logic and try to explain the base concepts.

This post will guide you to add interface by inheriting Knockout js in phtml file in magento 2.

First we create and register the module Magepow/ViewDemo/etc/module.xml

<?xml version="1.0"?> 
<config xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> 
<module name="Magepow_ViewDemo" setup_version="1.0.0" />


\Magento\Framework\Component\ComponentRegistrar::MODULE, 'Magepow_ViewDemo', __DIR__ ); 

Next, create block for phtml file Magepow/ViewDemo/Block/Link.php

namespace Magepow\ViewDemo\Block;
use Magento\Catalog\Model\Product;
class Link extends \Magento\Framework\View\Element\Template
* @param \Magento\Framework\View\Element\Template\Context $context
* @param array $data
public function __construct(
\Magento\Framework\View\Element\Template\Context $context,
array $data = []
parent::__construct($context, $data);
public function getViewDemo(){
return __('Magepow Alothemes');

Now let’s create a layout for the block nameMagepow/ViewDemo/view/frontend/layout/cms_index_index.xml

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<referenceContainer name="main">
<block class="Magepow\ViewDemo\Block\Link" name="homepage_slider" template="Magepow_ViewDemo::link.phtml" />

continue to create phtml file to get link with js file to get the interface of html file Magepow/ViewDemo/view/frontend/templates/link.phtml

<div id="configure-dimensions" data-bind="scope: 'magepowdemo'"> 
<!-- ko template: getTemplate() --><!-- /ko --> 
<script type="text/x-magento-init"> 
            "#configure-dimensions": { 
                "Magento_Ui/js/core/app": { 
                   "components": { 
                       "magepowdemo": { 
                           "component": "Magepow_ViewDemo/js/link/view", 
                           "magepowDemo":"<?php echo $block->getViewDemo()?>" 

Now we create js file to receive information from the added viewer.html file and convert it to link.phtml file for display.Magepow/ViewDemo/view/frontend/web/js/link/view.js

define(['jquery', 'uiComponent', 'ko'], function ($, Component, ko) {
    'use strict';
    return Component.extend({
        defaults: {
            template: 'Magepow_ViewDemo/viewer'
        initialize: function(config){
        var self = this;
        self.textDemo = ko.observable(config.magepowDemo);

finally create viewer.html fileMagepow/ViewDemo/view/frontend/web/template/viewer.html

Today's message is: <span data-bind="text: textDemo"></span>

Thank you for reading this article