How to write a page using knockout JS in Magento 2?

In this blog, I will show you how to write a page using knockout JS in Magento 2.

Now I will create a module Webnexs_Webpos and the page will have the URL {domain/Webpos}. Here are the following steps to help you to do it by yourself:

  1. File Layout
  2. File block
  3. File template of block
  4. Write an outlook model knockout JS in Magento
  5. Content of the page in the template of knockout
Get build your Magento eCommerce store with 300+ stunning features today, click here!!!

How to write a page using knockout JS in Magento 2?

Write page using knockout JS in Magento 2

File Layout

webpos_index_index.xml:

<?xml version="1.0"?>

<page layout='1column' xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" >

 <body>

 <referenceContainer name="content">

<block class="Webnexs\Webpos\Block\Customer\Lists" before="-" cacheable="false" template="customer/list.phtml">

 <arguments>

 <argument name="jsLayout" xsi:type="array">

<item name="components" xsi:type="array">

  <item name="customer-list" xsi:type="array">



                 <item name="component" xsi:type="string">Webnexs_Webpos/js/view/customer/list</item>



     <item name="config" xsi:type="array">



                                  <item name="template" xsi:type="string">Webnexs_Webpos/customer/list</item>



                              </item>



                          </item>



                      </item>



                  </argument>



              </arguments>



          </block>



      </referenceContainer>



  </body>



</page>

Note: From the following file, you can observe

  • The file block1:Webnexs\Webpos\Block\Customer\Lists
  • The file template: customer/list.phtml
  • The outlook model of knockout Js  Webnexs_Webpos/js/view/customer/list
  • The file template of knockout js:Webnexs_Webpos/customer/list

File Block

Webnexs\Webpos\Block\Customer\Lists:

<?php

namespace Webnexs\Webpos\Block\Customer;

/**

* Class Lists

* @package Webnexs\Webpos\Block\Customer

*/

class Lists extends \Magento\Framework\View\Element\Template

{

 /**

  * Lists constructor.

 * @param \Magento\Framework\View\Element\Template\Context $context

* @param array $layoutProcessors

* @param array $data

*/

 public function __construct(

 \Magento\Framework\View\Element\Template\Context $context,

 array $layoutProcessors = [],

array $data = []

  ) { parent::__construct($context, $data);

 $this->layoutProcessors = $layoutProcessors;

}

/**

* @return string

  */

public function getJsLayout()

 {

 foreach ($this->layoutProcessors as $processor) {

 $this->jsLayout = $processor->process($this->jsLayout);

 }

 return parent::getJsLayout();

 }

}

Note: It needs function getJsLayout. We call it in the template file.

File Template of block

<div id="customer-page">

 

  <div id="block-customer-list" data-bind="scope:'customer-list'" class="block">

 

      <!-- ko template: getTemplate() --><!-- /ko -->

 

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

 

          {

 

              "#block-customer-list": {

 

                  "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>

 

              }

 

          }

 

      </script>

 

  </div>

 

</div>

Note:

A“Customer list” is in the file layout webpos_index_index.xml

Write an outlook model knockout JS

define(

  [

  'jquery',

 'ko',

 'uiComponent'

  ],

 function ($,ko, Component) {

 "use strict";

var listCustomers = ko.observableArray([]);

 return Component.extend({

 getListCustomers : function(){

 if(!listCustomers().length) {

 jQuery.ajax({



       url: 'http://louis.com/public_html/magento2/index.php/webpos/index/customerList',

  type: 'POST',

 complete: function (data) {

listCustomers(JSON.parse(data.responseText));

 },

});

}

  return listCustomers;

}

});

 }

);

Content of the page in the template 

<table>

<thead>

<tr>

 <th>ID</th>

<th>Email</th>

<th>Name</th>

<th>Created At</th>

 </tr>

</thead>

<tbody data-bind="foreach: getListCustomers()">

 <tr>

 <td data-bind="text: entity_id"></td>

 <td data-bind="text: email"></td>

 <td data-bind="text: firstname  + ' ' + lastname"></td>

<td data-bind="text: created_at"></td>

</tr>

</tbody>

</table>

<thead>

 <tr>

<th>ID</th>

<th>Email</th>

 <th>Name</th>

<th>Created At</th>

</tr>

  </thead>

 <tbody data-bind="foreach: getListCustomers()">

 <tr>

 <td data-bind="text: entity_id"></td>

 <td data-bind="text: email"></td>

 <td data-bind="text: firstname  + ' ' + lastname"></td>

 <td data-bind="text: created_at"></td>

</tr>

</tbody>

</table>


The above steps will help you to write a page using knockout JS in Magento 2.

How to write a page using knockout JS in Magento 2


Posted

in

,

by

Comments

One response to “How to write a page using knockout JS in Magento 2?”

  1. Jack Avatar

    I liked this blog
    In general I haven’t found much good Magento2 documentation.
    webnexs has been a good help for me with my Magento2 studies.

Leave a Reply

Your email address will not be published. Required fields are marked *