入門 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>