KnockoutJS - 环境设置

使用 KnockoutJS 非常容易。只需在 HTML 页面中使用 <script> 标记引用 JavaScript 文件即可。

Knockout.js 可以通过以下方式访问 -

Knockoutjs 设置

现在引用该文件，如以下代码所示。

<script type = 'text/javascript' src = 'knockout-3.3.0.js'></script>

更新 src 属性以匹配下载文件的保存位置。

  • 您可以参考 CDN 中的 KnockoutJS 库 -

<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
   type = "text/javascript"></script>

  • 或者，您可以参考CDNJS的 KnockoutJS 库的缩小版本，如下所示 -

<script src = "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js" 
   type = "text/javascript"></script>

注意- 在本教程的所有章节中，我们都引用了 KnockoutJS 库的 CDN 版本。

例子

KnockoutJS 基于模型-视图-视图模型 (MVVM) 模式。我们将在KnockoutJS-MVVM 框架一章中深入研究这种模式。首先我们看一个KnockoutJS的简单例子。

现场演示 
<!DOCTYPE html>
   <head>
      <title>KnockoutJS Simple Example</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>

   <body>
      <!-- This is called "view" of HTML markup that defines the appearance of UI -->

      <p>First String: <input data-bind = "value: firstString" /></p>
      <p>Second String: <input data-bind = "value: secondString" /></p>

      <p>First String: <strong data-bind = "text: firstString">Hi</strong></p>
      <p>Second String: <strong data-bind = "text: secondString">There</strong></p>

      <p>Derived String: <strong data-bind = "text: thirdString"></strong></p>

      <script>
         <!-- This is called "viewmodel". This javascript section defines the data and 
            behavior of UI -->

         function AppViewModel() {
            this.firstString = ko.observable("Enter First String");
            this.secondString = ko.observable("Enter Second String");

            this.thirdString = ko.computed(function() {
               return this.firstString() + " " + this.secondString();
            }, this);
         }

         // Activates knockout.js
         ko.applyBindings(new AppViewModel());
      </script>

   </body>
</html>

以下行引用 KnockoutJS 库。

<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
   type = "text/javascript"> </script>

这一行引用了 KnockoutJS 库。

我们有两个输入框：First String和Second String。这两个变量分别在 ViewModel 中使用值 Enter First String 和 Enter Second String 进行初始化。

<p>First String: < input data-bind = "value: firstString" /> </p>

这就是我们使用主体部分中的“data-bind”属性将 ViewModel 中的值绑定到 HTML 元素的方式。

这里，“firstString”指的是 ViewModel 变量。

this.firstString = ko.observable("Enter First String");

ko.observable是一个密切关注值变化的概念，以便它可以更新底层 ViewModel 数据。

为了更好地理解这一点，我们将第一个输入框更新为“Hello”，将第二个输入框更新为“TutorialsPoint”。您将看到这些值同时更新。我们将在KnockoutJS - Observables章节中详细研究这个概念。

this.thirdString = ko.computed(function() {
   return this.firstString() + " " + this.secondString();
}, this);

接下来，我们在视图模型中计算函数。该函数根据前面提到的 2 个字符串得出第三个字符串。因此，对这些字符串所做的任何更新都会自动反映在该派生字符串中。不需要编写额外的代码来完成此操作。这只是一个简单的例子。我们将在KnockoutJS - 计算可观察值章节中研究这个概念。

输出

将以上代码保存为my_first_knockoutjs_program.html。在浏览器中打开此文件，您将看到如下输出。

第一个例子

将字符串修改为“Hello”和“TutorialsPoint”，输出更改如下。

你好教程点示例