📌  相关文章
📜  可观察的：KnockoutJS(1)

📅  最后修改于: 2023-12-03 14:50:39.162000             🧑  作者: Mango

可观察的：KnockoutJS

KnockoutJS是一种JavaScript库，用于实现基于MVVM（Model-View-ViewModel）模式的用户界面。它使用可观察对象（observable objects）和绑定（bindings）来构建动态页面。

特点
  • 基于MVVM模式，将View与ViewModel分离，利于代码复用和维护
  • 使用可观察对象（observable objects）和绑定（bindings）来实现页面与数据的双向绑定
  • 声明式编程风格，不需要手动维护DOM元素
  • 轻量级，易于学习和使用
  • 支持插件机制，方便扩展功能
引入
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>KnockoutJS Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js" integrity="sha384-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" crossorigin="anonymous"></script>
</head>
<body>
    <h1>KnockoutJS Demo</h1>
    <div data-bind="text: message"></div>
    <script>
        var viewModel = {
            message: ko.observable('Hello, KnockoutJS!')
        };
        ko.applyBindings(viewModel);
    </script>
</body>
</html>
可观察对象

可观察对象是KnockoutJS中的核心概念，是一个带有"通知功能"的JavaScript对象。当可观察对象的值发生变化时，会自动触发绑定的更新操作。

定义可观察对象
var viewModel = {
    name: ko.observable('Alice'),
    age: ko.observable(18),
    isMale: ko.observable(false)
};
读取可观察对象的值
var name = viewModel.name(); // Alice
写入可观察对象的值
viewModel.name('Bob');
订阅可观察对象的变化
viewModel.name.subscribe(function(newValue) {
    console.log("Name changed to " + newValue);
});
绑定

绑定是指将可观察对象与页面元素或JavaScript表达式关联起来，使得它们之间可以进行双向数据绑定。KnockoutJS提供了多种绑定方式，包括基本绑定和高级绑定。

基本绑定

文本绑定

将可观察对象的值作为文本内容显示在页面上。

<div data-bind="text: message"></div>

属性绑定

将可观察对象的值作为元素属性的值。

<img data-bind="attr: { src: avatarUrl, alt: name }">

样式绑定

根据可观察对象的值动态设置元素的样式。

<div data-bind="style: { color: textColor }">Text with color</div>

可见性绑定

根据可观察对象的值控制元素的可见性。

<div data-bind="visible: isVisible">Visible when true</div>

循环绑定

根据可观察对象的数组循环生成相应的HTML元素。

<ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
</ul>
高级绑定

KnockoutJS还支持高级绑定，如事件绑定、表单绑定、组合绑定等。

事件绑定

将可观察对象的方法与事件关联起来，使得事件触发时可调用方法。

<button data-bind="click: handleButtonClick">Click me</button>

表单绑定

将可观察对象与表单元素关联起来，实现表单数据的双向绑定。

<input type="text" data-bind="value: inputText">

组合绑定

将多个绑定组合起来，实现更为复杂的效果。

<div data-bind="css: { 'active': isActive }, text: message"></div>
结语

KnockoutJS是一款优秀的MVVM框架，具有易学易用，代码清晰和可扩展等优点。它为我们开发高质量的Web应用程序提供了便利和效率。