环境设置（Environment Setup）

优质

小牛编辑

135浏览

2023-12-01

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

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

您可以从其官方网站下载Knockout.js的生产版本
将显示如下图所示的页面。点击下载链接，您将获得最新的knockout.js文件。

现在请参考以下代码中显示的文件。

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

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

您可以从CDNs参考KnockoutJS库 -

您可以在代码中从Microsoft Ajax 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>

Note - 在本教程的所有章节中，我们都提到了KnockoutJS库的CDN版本。

例子 (Example)

KnockoutJS基于Model-View-ViewModel（MVVM）模式。我们将在KnockoutJS - MVVM Framework一章中深入研究这种模式。首先让我们来看一个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>

这就是我们如何使用body部分中的'data-bind'属性'data-bind' ViewModel中的值绑定到HTML元素。

这里，'firstString'指的是ViewModel变量。

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

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

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

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

接下来，我们在viewmodel中计算了函数。此函数基于前面提到的2个字符串派生第三个字符串。因此，对这些字符串所做的任何更新都会自动反映在此派生字符串中。无需编写额外的代码即可完成此任务。这只是一个简单的例子。我们将在KnockoutJS - Computed Observables章节中研究这个概念。

输出 (Output)

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

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