目录

KnockoutJS - 环境设置( Environment Setup)

使用KnockoutJS非常容易。 只需在HTML页面中使用

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

  • 您可以从其官方网站下载Knockout.js的生产版本

    将显示如下图所示的页面。 点击下载链接,您将获得最新的knockout.js文件。

Knockoutjs设置

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

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

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

  • 您可以从CDNs参考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 StringSecond 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”,将第二个输入框更新为“IoWiki”。 您将看到值同时更新。 我们将在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”和“IoWiki”,输出更改如下。

您好IoWiki示例
↑回到顶部↑
WIKI教程 @2018