magento2中的knockoutjs的使用与初始化详细讲解

当前位置：技术文章>> magento2中的knockoutjs的使用与初始化详细讲解

文章标题：magento2中的knockoutjs的使用与初始化详细讲解

文章分类: Magento
27161 阅读

系统学习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做任何您的编程思维想到的事情。

文章标题：magento2中的knockoutjs的使用与初始化详细讲解

系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》

推荐文章

系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发》