KnockoutJs 简介

此内容基本上是原始材料的翻译。目的是了解 Magento 2 的 KnockoutJs 并用葡萄牙语创建有关 KnockouJs 的内容。

文档

• 微软：MVVM
• KnockoutJs：简介
• KnockoutJs：安装

MVVM模式

MVVM（模型-视图-视图模型）架构是一种广泛应用于用户界面应用程序的软件设计模式。 MVVM 在具有复杂和交互式用户界面的应用程序中特别有用，因为它清楚地将业务逻辑与界面行为分开。这有利于代码维护、可测试性和可扩展性。

当用户与 View 交互时，ViewModel 捕获这些操作并更新 Model 中的相应数据。当 Model 更新时，ViewModel 会接收这些更改并自动更新 View，反映用户界面中的更改。 ViewModel 还可以执行特定操作，例如向服务器发送请求以获取或发送数据。

模型： 模型 代表应用程序的数据层。它处理业务逻辑、验证规则、数据存储和检索。模型通常由表示特定于应用程序域的实体和功能的数据对象组成。

View： View 是应用程序的表示层，负责显示 Model 数据并与用户交互。它代表用户交互以可视化和操作数据的图形界面。在MVVM架构中，View与业务逻辑尽可能保持解耦，方便更新和替换。

ViewModel： ViewModel 是 MVVM 模式的核心部分。它充当 View 和 Model 之间的中介，在它们之间执行通信和双向数据绑定。 ViewModel 包含表示逻辑，将 Model 中的数据转换为适合在 View 中显示的形式。此外，ViewModel 管理用户事件和响应，根据需要与 Model 交互。

淘汰赛

Knockout.js 是一个开源 JavaScript 库，可让您创建动态和反应式用户界面。它对于开发具有复杂和交互式用户界面的 Web 应用程序特别有用。 KnockoutJs 基于 MVVM 设计模式 (Model-View-ViewModel)，它将业务逻辑 (Model) 与表示 (View) 以及中间层分离名为 ViewModel 的层。它独立于任何其他结构。

KnockoutJs 是由 Microsoft 员工 Steve Sanderson 于 2010 年 7 月 5 日开发并维护的开源项目。

KnockoutJs 支持所有主流浏览器 - IE 6、Firefox 3.5、Chrome、Opera、Safari（桌面/移动）。 data-bind 属性不是 HTML 原生的，尽管它是一个可接受的属性（它与 HTML 5 严格兼容，并且不会导致 HTML 4 出现问题，尽管验证器表明它是一个无法识别的属性）。但由于浏览器不知道这意味着什么，所以需要激活 KnockoutJs 才能生效。

使用 KnockoutJs 时，您的 view 层只是带有声明性绑定的 HTML 文档，用于将其链接到 view-model 层。或者，您可以使用 models，它使用 view-model.

层中模型的数据生成 HTML

只需将 script 块放置在 HTML 文档的底部或将其放置在顶部，并将内容包装在 DOM 就绪处理程序中，如 jQuery 的 $ 函数。

ko.applyBindings(myViewModel)：是在KnockoutJs中应用数据绑定并将ViewModel（或Model）绑定到界面用户的方法（查看）。它将 ViewModel 连接到 DOM 中的 HTML 元素，允许来自 ViewModel 的数据自动反映在 UI 中，反之亦然。调用此方法时，KnockoutJs 会遍历 DOM 来搜索具有 KnockoutJs 数据绑定 指令的元素，并在这些元素与指令中指定的 ViewModel 属性之间创建链接。

（可选）您可以传递第二个参数来定义要在文档的哪个部分搜索数据绑定属性。例如，ko.applyBindings(myViewModel, document.getElementById('someElementId'))。这会将激活限制为 ID 为 someElementId 的元素及其后代，如果您想要拥有多个显示模型并将每个模型与页面的不同区域相关联，这会很有用。

安装

只需使用 <script> 引用 JavaScript 文件即可HTML 页面上的某处。<br> </script>

<script type="text/javascript" src="knockout-3.5.1.js"></script>

显然有必要更新 src 属性以匹配下载文件的放置位置。

CDN

为了提供最快的下载速度，最好在官方 KnockoutJs 安装指南网站上引用来自以下第三方 CDN 之一的 KnockoutJs。

以上是KnockoutJs 简介的详细内容。更多信息请关注PHP中文网其他相关文章！