KnockoutJS - 环境设置

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

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

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

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

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

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

• 您可以参考CDNs中的KnockoutJS库 :

• 您可以在代码中 Microsoft Ajax CDN 中引用KnockoutJS库，如下所示;

• 或者你可以从 CDNJS 如下 :

注意 : 在本教程的所有章节中，我们都提到了KnockoutJS库的CDN版本.

示例

KnockoutJS基于模型 - 视图 - ViewModel(MVVM)模式.我们将在 KnockoutJS  -  MVVM Framework 一章中深入研究这种模式.首先让我们来看一个KnockoutJS的简单示例.

                                 
First String: 
      
Second String: 
      
First String: Hi
      
Second String: There
      
Derived String: 
         

以下行是指KnockoutJS库.

这一行是指KnockoutJS库.

我们有两个输入框: First String 和第二个字符串.这两个变量在ViewModel中分别用值Enter First String和Enter Second String初始化.

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

这是我们使用正文部分中的'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);

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

输出

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