Knockout(KO) là một thư viện của Javascript, nó giúp bạn tạo, hiển thị hay hiệu chỉnh User Interface(UI) với một data model được định nghĩa sẵn. Bất cứ khi nào bạn có phần thay đổi(thay đổi về action của user hay dữ liệu nội tại thay đổi) trong UI thì KO có thể giúp bạn thực hiện nó một cách đơn giản, và dễ kiểm soát. Trong bài viết này tôi sẽ hướng dẫn các bạn cách sử dụng Knockout Js trong file templates trong Magento 2.
Tạo custom templates
Đầu tiên các bạn tạo một file templates dùng để kết nối đến Knockout Js. Ví dụ ở đây tôi đã tạo module, layout, controller rồi nhé. Nếu các bạn chưa biết thì có thể đọc lại các bài trước đó.
Trong file layout tôi tạo một block và kết nối đến file templates.
ViMagento/OrderGrid/view/frontend/layout/grid_post_index.xml
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0"?> <page 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 name="vimagento_helloworld_knockout_test" template="ViMagento_OrderGrid::knockout.phtml" cacheable="false"/> </referenceContainer> </body> </page> |
ViMagento/OrderGrid/view/frontend/templates/knockout.phtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="custom-component" data-bind="scope:'customcomponent'"> <!-- ko template: getTemplate() --><!-- /ko --> <script type="text/x-magento-init"> { "#custom-component": { "Magento_Ui/js/core/app": { "components": { "customcomponent": { "component": "ViMagento_OrderGrid/js/custom-component" } } } } } </script> </div> |
Trong file templates trên tôi đã kết nối đến file knockout js có tên custom-component.
Tạo knockout Js
ViMagento/OrderGrid/view/frontend/web/js/custom-component.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
define(['jquery', 'uiComponent', 'ko'], function ($, Component, ko) { 'use strict'; return Component.extend({ defaults: { template: 'ViMagento_OrderGrid/knockout-test' }, initialize: function () { this.customerName = ko.observableArray([]); this.customerData = ko.observable(''); this._super(); }, addNewCustomer: function () { this.customerName.push({name:this.customerData()}); this.customerData(''); } }); } ); |
Ở file js trên tôi đã kết nối đến 1 file html có tên là knockout-test dùng để render mã HTML và dữ liệu từ knockout js.
Tạo file HTML
ViMagento/OrderGrid/view/frontend/web/template/knockout-test.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="component-wrapper"> <div class="field"> <label class="label" for="email"><span data-bind="i18n: 'Tạo người dùng mới'"></span></label> <div class="control"> <input name="customername" id="customername" type="text" class="input-text" data-bind="value: customerData"> </div> </div> <div class="primary"> <button type="button" class="action action-login secondary" data-bind="click: addNewCustomer"> <span data-bind="i18n: 'Lưu'"></span> </button> </div> <div class="customer-list" style="width: 20%;background: #eee;margin-top: 10px;" data-bind="foreach: customerName"> <li data-bind="text: name"></li> </div> </div> |
Ở trên là một ví dụ cơ bản về cách viết của knockout js. Nếu thực hiện đúng thì sẽ có kết quả như sau:
Kết luận
Vừa rồi tôi đã hướng dẫn các bạn sử dụng Knockout Js trong Magento 2. Đây chỉ là cú pháp cơ bản của Knockout Js, tôi sẽ cố gắng viết nhiều bài viết về Knockout Js hơn nữa trong thời gian tới. Thanks.
b
bai viet hay