系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》
本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。
你好模型， 视图， 查看模型
了解KnockoutJS的最快方法是一个基本的例子。首先，让我们创建以下 HTML 页面
<!-- File: page.html --> <!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script> </head> <body> <div id="main"> <h1></h1> <p></p> </div> </body> </html>
从 cloudflare CDN 加载 KnockoutJS 库
从 jQuery 代码 CDN 加载 jQuery 库
设置一个空的 DOM 节点结构
您不需要从 CDN 加载 jQuery 和 KnockoutJS，但如果您这样做，则在本教程中它是最简单的。
如果在浏览器中加载此页面，它将完全空白。那是因为我们需要
添加创建视图模型并应用 KnockoutJS 绑定的 JavaScript 代码
将视图代码添加到从视图模型读取的 HTML 页面
解决其中的第一个问题，让我们将第三个javascript文件添加到我们的页面。我们将创建一个以以下内容命名的文件ko-init.js
//File: ko-init.js
jQuery(function(){
viewModel = {
title:"Hello World",
content:"So many years of hello world"
};
ko.applyBindings(viewModel);
});然后使用第三个脚本标签添加到我们的页面。ko-init.js
<!-- File: page.html --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script> <script type="text/javascript" src="ko-init.js"></script> 最后，更改 and 标记，使其包含以下属性。h1pdata-bind <!-- File: page.html --> <div id="main"> <h1 data-bind="text:title"></h1> <p data-bind="text:content"></p> </div>
完成上述操作后，重新加载页面，您应该会看到标题和内容已呈现。
//File: ko-init.js
jQuery(function(){
viewModel = {
title:"Hello World",
content:"So many years of hello world"
};
ko.applyBindings(viewModel);
});
//File: ko-init.js
viewModel = {
title:"Hello World",
content:"So many years of hello world"
};
<!-- File: page.html -->
<div id="main">
<h1 data-bind="text:title"></h1>
<p data-bind="text:content"></p>
</div>
value = viewModel['title'];
textNode = document.createTextNode(value);
h1.appendChild(textNode);//File: ko-init.js
jQuery(function(){
var viewModelConstructor = function()
{
this.getTitle = function()
{
return "Hello Method World";
}
this.content = "So many years of hello world";
}
viewModel = new viewModelConstructor;
ko.applyBindings(viewModel);
});在这里，我们使用了一个javascript构造函数来创建一个简单的对象，并带有一个方法。如果我们更改视图以调用该方法，您将看到它按预期工作getTitlegetTitle
<!-- File: page.html --> <div id="main"> <h1 data-bind="text:getTitle()"></h1> <p data-bind="text:content"></p> </div>
考虑绑定参数的另一种方法是，它们是访问视图模型的值和方法的临时、有限的 JavaScript 范围。
### 其他绑定
虽然此示例很简单，但您可以开始了解这个基本构建块如何实现更复杂的视图逻辑。更新 DOM 的业务留给了 ings，更新模型的业务留给了纯非 DOM JavaScript 代码。data-bind
你可以开始看到它与其他绑定的价值。例如，让我们在我们的theValueviewModelConstructor
//File: ko-init.js
jQuery(function(){
var viewModelConstructor = function()
{
this.getTitle = function()
{
return "Hello World";
}
this.content = "So many years of hello world";
this.theValue = "2";
}
viewModel = new viewModelConstructor;
ko.applyBindings(viewModel);
});，然后添加具有新绑定的输入标记。
<!-- File: page.html --> <div id="main"> <h1 data-bind="text:getTitle()"></h1> <p data-bind="text:content"></p> <input type="text" data-bind="value:theValue"/> </div>
重新加载页面，您将看到值为 .2
data-bind="value:theValue" <!-- File: page.html --> <div id="main"> <h1 data-bind="text:getTitle()"></h1> <p data-bind="text:content"></p> <select data-bind="value:theValue"> <option value="">-- Choose --</option> <option value="1">First</option> <option value="2">Second</option> <option value="3">Third</option> </select> </div>
虽然这个例子很简单，但它背后的概念却不是。无需更改任何 javascript 应用程序代码，绑定允许我们更改 UI。value
### 可观察量
到目前为止，我们看到的是一个强大的客厅技巧。整洁，也许有用，但它只为KnockoutJS真正的“淘汰”功能——可观察量奠定了基础。
同样，我们将通过一个例子进行深入研究。更改视图，使其与以下内容匹配
<!-- File: page.html --> <div id="main"> <p data-bind="text:theValue"></p> <select data-bind="value:theValue"> <option value="">-- Choose --</option> <option value="1">First</option> <option value="2">Second</option> <option value="3">Third</option> </select> <input type="text" data-bind="value:theValue"/> <div> <br/><br/> <button id="button">Do It</button> </div> </div>
并更改视图模型和绑定，使其与以下内容匹配。
//File: ko-init.js
jQuery(function(){
var viewModelConstructor = function()
{
this.theValue = ko.observable("1");
}
window.viewModel = new viewModelConstructor;
ko.applyBindings(window.viewModel);
});如果您重新加载页面，您将看到我们已将 的值绑定到 our and 标记。到目前为止，我们的观点没有什么新东西——这与我们以前所做的那种绑定相同。但是，您会注意到我们在视图模型中做了一些不同的事情。1<input/><p/>
//File: ko-init.js
this.theValue = ko.observable("1");我们没有设置为硬编码值或自定义函数，而是将值设置为 KnockoutJS 称之为可观察量的值。可观察量是一种特殊的吸气者和二传手。theValue
如果你打开你的javascript控制台，并键入以下内容，你会看到我们可以通过将其作为函数调用来获取可观察量的值（可以通过控制台获得，因为我们将其定义为对象的全局对象）
viewModelwindow > viewModel.theValue() > "1"
我们可以通过传入参数在可观察量上设置一个值。下面介绍了如何设置可观察量，然后获取可观察量的值。
> viewModel.theValue("3")
//...
> viewModel.theValue()
> "3"然而，可观察量的真正力量在于我们将可观察量绑定到的 DOM 节点会发生什么。尝试通过控制台更改观察器的值并观察浏览器窗口
> viewModel.theValue("3");
> viewModel.theValue("2");
> viewModel.theValue("1");
> viewModel.theValue("10");更新可观察量的值时，绑定节点的值会实时更改。同样，作为开发人员，我们不必担心 DOM 节点如何更新——一旦我们在模型上设置了值，这个值就会自动反映在用户界面中。
虽然它超出了本文的范围，但当我们的视图模型包含方法时，您可以看到它如何组合在一起形成复杂的 JavaScript 应用程序。
//File: ko-init.js
jQuery(function(){
var viewModelConstructor = function()
{
this.theValue = ko.observable("1");
var that = this;
this.pickRandomValue = function(){
var val = Math.floor(Math.random() * (3));
that.theValue(val);
};
}
window.viewModel = new viewModelConstructor;
ko.applyBindings(window.viewModel);
});并且您使用 KnockoutJS 的事件绑定，例如click
<!-- File: page.html --> <button data-bind="click:pickRandomValue">Do It</button>
我们将把解析作为读者的练习
### 模板绑定
另一个需要理解的重要绑定是 KnockoutJS 的模板绑定。考虑这样的视图模型
//File: ko-init.js
jQuery(function(){
var viewModelConstructor = function()
{
this.first = {
theTitle:ko.observable("Hello World"),
theContent:ko.observable("Back to Hello World")
};
this.second = {
theTitle:ko.observable("Goodbye World"),
theContent:ko.observable("We're sailing west now")
};
}
viewModel = new viewModelConstructor;
ko.applyBindings(viewModel);
});在这里，我们创建了一个标准视图模型，但具有嵌套的数据对象。如果将其与这样的视图相结合
<!-- File: page.html -->
<div id="main">
<div id="one" data-bind="template:{'name':'hello-world','data':first}"></div>
<div id="two" data-bind="template:{'name':'hello-world','data':second}">
</div>
<script type="text/html" id="hello-world">
<h1 data-bind="text:theTitle"></h1>
<p data-bind="text:theContent"></p>
</script>
</div>模板绑定接受 javascript 对象作为参数
<!-- File: page.html -->
<div id="one" data-bind="template:{'name':'hello-world','data':first}"></div>data 参数是我们想要用来渲染模板的视图模型的属性。模板的名称就是这样 — 要查找和呈现的模板名称。
向系统添加命名模板的最基本方法是添加带有 of 的标记。<script/>typetext/html
<!-- File: page.html --> <script type="text/html" id="hello-world"> <h1 data-bind="text:theTitle"></h1> <p data-bind="text:theContent"></p> </script>
如果你以前从未见过这个，它可能看起来很奇怪/陌生，但许多现代JavaScript框架使用非标签作为将非渲染（但DOM可访问）内容添加到页面的一种方式。模板只是一组带有 KnockoutJS 绑定的标准 HTML 节点。text/javascript<script/>
### 组件
我们将要进行的最后一个绑定是组件绑定。组件是一种将 KnockoutJS 模板和 KnockoutJS 视图文件打包在一起的方法。这意味着您可以有一个相对简单的视图
<!-- File: page.html --> <div data-bind="component:'component-hello-world'"></div>
这隐藏了已注册组件的复杂性。
//File: ko-init.js
jQuery(function(){
var viewModelConstructor = function()
{
this.message = "Hello World";
}
var theTemplate = "<h1 data-bind=\"text:message\"></h1>";
ko.components.register('component-hello-world', {
viewModel:viewModelConstructor,
template:theTemplate
});
ko.applyBindings();
});组件对象的函数需要组件的名称，然后是 KnockoutJS 组件对象。组件对象是具有两个属性的 JavaScript 脚本对象。该属性需要一个视图模型构造函数，并且该属性应该是带有 KnockoutJS 模板的字符串。注册后，可以通过将组件的名称（作为字符串）传递到绑定中使用组件。registerviewModeltemplate
<!-- File: page.html --> <div data-bind="component:'component-hello-world'"></div>
如果您不想使用语法 — KnockoutJS 使您能够根据组件名称插入具有自定义标记名称的组件。在您的视图/HTML 文件中尝试此操作data-bind
<!-- File: page.html --> <component-hello-world></component-hello-world>
这只触及了KnockoutJS可能的表面。官方文档对组件绑定有一个很好的概述。
### 自定义绑定
我们今天要讨论的最后一个 KnockoutJS 功能是自定义绑定功能。KnockoutJS使javascript开发人员能够创建自己的绑定。例如，这里我们调用一个名为 的自定义绑定，并向其传递 viewModel 的属性值。pulseStormHelloWorldmessage
<!-- File: page.html --> <div data-bind="pulseStormHelloWorld:message"></div>
如果没有实现，KnockoutJS将忽略我们的绑定。相反，请尝试以下ko-init.js
//File: ko-init.js
jQuery(function(){
var viewModelConstructor = function()
{
this.message = "Hello World";
}
ko.bindingHandlers.pulseStormHelloWorld = {
update: function(element, valueAccessor){
jQuery(element).html('<h1>' + valueAccessor() + '</h1>');
}
};
ko.applyBindings(new viewModelConstructor);
});要将自定义绑定添加到 KnockoutJS，我们需要做的就是向对象的对象添加一个属性。此属性的名称是我们绑定的名称。处理程序是带有方法的 JS 对象。每当调用绑定时，KnockoutJS 都会调用该方法 — 无论是在 期间还是通过可观察量。kobinidngHandlersupdateupdateapplyBindings
完成上述操作后，重新加载 HTML 页面，您将看到调用的自定义绑定。当然，这是一个微不足道的例子，但是使用自定义绑定，您可以让KnockoutJS做任何您的编程思维想到的事情。