KnockoutJS-声明式绑定(1)

📌 相关文章

📜 KnockoutJS-声明式绑定(1)

📅 最后修改于: 2023-12-03 15:02:31.762000 🧑 作者: Mango

KnockoutJS-声明式绑定

简介

KnockoutJS 是一个开源的 JavaScript 库，旨在实现清晰、灵活的图形用户界面（GUI）以及富互联网应用界面（RIA），通过实现 Model-View-ViewModel（MVVM）模式来帮助开发者构建 web 应用程序。

KnockoutJS 提供了一个声明式绑定语法，使得开发者可以轻松地将 View 和 ViewModel 进行绑定，并自动同步 View 和 ViewModel 的数据。这种声明式绑定语法不仅方便了开发者的开发，同时也大大降低了代码的复杂度。

教程

1. 安装 KnockoutJS

通过以下方式安装 KnockoutJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>KnockoutJS Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
    <!-- HTML goes here -->
</body>
</html>

2. 声明 ViewModel

function ViewModel() {
    var self = this;
    self.firstName = ko.observable('John');
    self.lastName = ko.observable('Doe');
    self.fullName = ko.computed(function() {
        return self.firstName() + ' ' + self.lastName();
    });
}

在上面的代码中，我们声明了 ViewModel。ViewModel 中包含了 firstName，lastName 和 fullName 数据项，其中 firstName 和 lastName 都是可观察的数据项，这意味着当这些数据项发生变化时，页面也会发生变化。fullName 是一个计算属性，它根据 firstName 和 lastName 计算得出，并自动更新。

3. 绑定 ViewModel

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>KnockoutJS Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
    <div>
        <input type="text" data-bind="value: firstName" />
        <input type="text" data-bind="value: lastName" />
        <p data-bind="text: fullName"></p>
    </div>

    <script>
        function ViewModel() {
            var self = this;
            self.firstName = ko.observable('John');
            self.lastName = ko.observable('Doe');
            self.fullName = ko.computed(function() {
                return self.firstName() + ' ' + self.lastName();
            });
        }

        ko.applyBindings(new ViewModel());
    </script>
</body>
</html>

在 HTML 代码中，我们通过 data-bind 指令来将 ViewModel 和 View 进行绑定。我们绑定了两个 input 框，分别对应 firstName 和 lastName 数据项，以及一个 p 标签对应 fullName 数据项。

在 JavaScript 代码中，我们通过 ko.applyBindings(new ViewModel()) 将 ViewModel 和 View 进行绑定。

当我们运行这个示例时，可以看到当我们修改 firstName 和 lastName 时，fullName 也会随之发生变化，这是因为我们已经将 ViewModel 和 View 进行了绑定。

结论

KnockoutJS 通过提供声明式绑定语法，帮助开发者快速构建 web 应用程序，并降低了代码的复杂度。声明式绑定语法不仅方便了开发者的开发，同时也大大降低了代码的复杂度。