Knockout 是 Magento 2 前端世界中引入的最大变化之一，虽然一开始它真的很难掌握，但最终它会成为一个非常有用的工具，使用起来很有趣。
在您必须根据用户的输入或其他一些操作更新某些内容的情况下，所讨论的库确实很出色。它将“可观察值”带到表中——可以自动更新的变量，并通知所有相关方它们已被修改。除此之外，我们还有一种“计算”类型的函数，它们会在更新其中任何可观察对象时自动触发。添加将 html 元素绑定到这些变量的选项，现在应该清楚容易获得的可能性的数量。
在本文中，我们将创建一个简单的模块，负责与我们的客户打乒乓球。我将向您展示如何：
– 创建一个简单的前端模块，
– 声明并为可观察变量赋值，
– 将变量从模板/块/php 传递到 JavaScript，
– 在模板中使用 knockout 可观察
对象， – 在可观察到的变化。
让我们从创建模块 Magently_TableTennis 开始，该模块将为主页提供 JavaScript、模板和布局更新。
//registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Magently_TableTennis',
__DIR__
);//etc/module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Magently_TableTennis" setup_version="0.1.0">
<sequence>
<!-- add sequence since we will update cms_index_index layout -->
<module name="Magento_Cms"/>
</sequence>
</module>
</config>And this is where the fun part begins:
//view/frontend/web/js/view/tableTennis.js
//first we have to define modules we want to use in our script
define([
'uiComponent',
'ko'
], function (Component, ko) {
//we'll make our game a Component to allow someone to easily modify it in the future
return Component.extend({
initialize: function () {
//next line is basically equivalent of parent::__construct() in php
this._super();
//let's divide our component to 2 separate elements
//one responsible for populating our game's interface
this.populateUi();
//and one responsible for the gameplay itself
this.gameplay();
},
populateUi: function () {
//here we are creating an observable array and set its items to ping and pong
this.userActions = ko.observableArray(['ping', 'pong']);
//this observable will be responsible for storing information about currently selected action
//initialMove will be passed from template
this.selectedAction = ko.observable(this.initialMove);
//and here we will create an observable without initial value
//that will be responsible for storing computer's action
this.aiMove = ko.observable();
},
gameplay: function () {
//assign this to self so we can use it inside a function
var self = this;
//handleMove will be fired every time an observable inside it changes
ko.computed(function handleMove()
{
if (self.selectedAction() == self.userActions()[0]) {
self.aiMove(self.userActions()[1]);
}
else {
self.aiMove(self.userActions()[0]);
}
});
}
});
});
//view/frontend/layout/cms_index_index.xml
<?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="top.container">
<block class="\Magento\Framework\View\Element\Template"
name="tabletennis"
template="Magently_TableTennis::tabletennis.phtml"
before="-" />
</referenceContainer>
</body>
</page>//view/frontend/templates/tabletennis.phtml
<!-- data-bind attribute lets us bind knockout entities to our elemets -->
<div data-bind="scope: 'tableTennis'">
<!-- here we create select input with options fetched from userActions observable array -->
<!-- and bind the selected option to selectedAction observable -->
<select data-bind="options: userActions, value: selectedAction"></select>
<!-- analogically we bind the text of a paragraph element to aiMove -->
<p data-bind="text: aiMove"></p>
</div>
<!-- here we initialize our script -->
<script type="text/x-magento-init">
{
<?php // we can specify site elements on which we want to trigger our script ?>
<?php // * means we launch it only once - for the whole page ?>
"*": {
<?php // this is javascript we are launching ?>
"Magento_Ui/js/core/app": {
<?php // and here we declare components of Magento_Ui/js/core/app ?>
"components": {
"tableTennis": {
"component": "Magently_TableTennis/js/view/tableTennis",
<?php // here we set the initial move of the player ?>
"initialMove": "ping"
}
}
}
}
}
</script>