什么是 Knockout？
Knockout 是一款流行的前端框架，用于创建动态的单页面应用程序。它允许您使用声明性绑定（declarative binding）将 JavaScript 模型与 HTML 视图连接起来。通过在视图中添加 data-bind 属性，您可以轻松地将模型数据更新到视图中，并在视图更改时将更新保存回模型。
什么是 Unobtrusive JavaScript？
Unobtrusive JavaScript 是编写 JavaScript 的一种方式，其中 JavaScript 代码不会污染或依赖于 HTML 页面结构。相反，它使用现代浏览器提供的事件处理和选择器 API 来查找元素并添加事件监听器，而无需像旧式 JavaScript 一样直接在 HTML 元素上附加事件处理程序。
这种方法有很多优点。首先，它使您的 HTML 更易于阅读和理解，因为没有大量的嵌入式 JavaScript 代码。其次，它可以使您的代码更易于维护，因为您可以将 JavaScript 逻辑从页面结构中解耦出来。最后，它可以使您的应用程序更具可访问性，因为屏幕阅读器和其他辅助技术可以更好地理解您的 HTML 结构。
如何使用 Unobtrusive Knockout？
Unobtrusive Knockout 是一种使用 Knockout 框架的方式，使其与 Unobtrusive JavaScript 的理念相结合。为了做到这一点，我们需要遵循几个简单的步骤。
首先，我们将在 HTML 元素上添加 data-bind 属性，以将模型数据绑定到视图中。例如，我们可以将一个文本框绑定到模型中的一个属性：
------ ----------- ----------------- ----- --
然后，我们将使用 JavaScript 代码查找这些具有 data-bind 属性的元素，并使用 Knockout 框架将其与模型连接起来。为了实现这一点，我们可以编写一个名为 applyBindings 的函数，该函数接受一个模型对象作为参数并将其应用于整个页面。
--- ----- - -
----- ---------------------
--
------------------------最后，我们将使用 Unobtrusive JavaScript 技术向元素添加事件监听器。例如，我们可以编写以下代码，以便在用户提交表单时显示一个消息框：
--------------------------- -
----------- -------------
---由于我们已经将模型数据和视图绑定在一起，因此我们可以使用 Knockout 框架从模型中读取表单输入并在需要时更新视图。
结论
Unobtrusive Knockout 是一种非常有用的技术，它允许您使用 Knockout 框架创建动态的单页面应用程序，同时将 JavaScript 代码与 HTML 结构解耦。通过遵循上述步骤并使用示例代码，您可以开始尝试使用 Unobtrusive Knockout，并开始创建更具可访问性和易于维护的应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27801