入门 Hello 世界

Created: November-22, 2018

创建 HTML 文档并启用 knockout.js

创建一个 HTML 文件，并通过 <script> 标记包含 knockout.js。

<!DOCTYPE html>
<html>
<head>
    <title>Hello world! (knockout.js)</title>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
</body>
</html>

在淘汰赛脚本下添加第二个 <script> 标签。在此脚本标记中，我们将初始化视图模型并将数据绑定到我们的 Document。

<script>
  var ViewModel = function() {
    this.greeting = ko.observable("Hello");
    this.name = ko.observable("World");

    this.appHeading = ko.pureComputed(function() {
      return this.greeting() + ", " + this.name() + "!";
    }, this);
  };

  var appVM = new ViewModel();

  ko.applyBindings(appVM);
</script>

现在，通过向正文添加一些 HTML 来继续创建视图：

<section>
  <h1 data-bind="text: appHeading"></h1>
  <p>Greeting: <input data-bind="textInput: greeting" /></p>
  <p>Name: <input data-bind="textInput: name" /></p>
</section>

打开 HTML 文档并执行脚本时，你将看到一个显示 Hello，World 的页面！。当你更改 <input> 元素中的单词时，<h1> 文本会自动更新。

创建的文件如何工作

从外部源（cdnjs）加载了敲除的调试版本

码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>

创建具有可观察属性的 viewmodel 实例。这意味着淘汰赛能够检测到变化并相应地更新 UI。

码：

var appVM = new ViewModel();

Knockout 检查 DOM 的 data-bind 属性，并使用提供的 viewmodel 更新 UI。

码：

ko.applyBindings(appVM);

当遇到 text 绑定时，knockout 使用属性的值，因为它在绑定的 viewmodel 中定义以注入文本节点：

码：

<h1 data-bind="text: appHeading"></h1>