How to write a page using knockout JS in Magento 2

In this article, 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 the following steps help you to write a page using knockout JS:

  1. File Layout
  2. File block
  3. File template of block
  4. Write the outlook model knockout js in Magento 2
  5. Content of the page in the template of the knockout

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 ofknockout 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: The scale “customer-list” is in the file layout webpos_index_index.xml

Write the outlook model knockout js in Magento 2

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 of the knockout

<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>


Last Update: April 5, 2018  

February 22, 2018   166   Nandini R    Java Script    
Total 1 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

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

Facebook
Google+
http://www.webnexs.com/blog/kb/write-page-using-knockout-js-magento-2
Twitter
LinkedIn