KnockoutJS 环境设置
使用 KnockoutJS 非常容易。只需在 HTML 页面中使用 <script>标签引用 JavaScript 文件。
Knockout.js 可以通过以下方式访问 -
您可以从其官方网站 < /p 下载 Knockout.js 的生产版本
将显示如下图所示的页面。点击下载链接，您将获得最新的knockout.js 文件。
现在引用文件，如以下代码所示。
<script type = 'text/javascript' src = 'knockout-3.3.0.js'></script>
更新 src 属性以匹配保存下载文件的位置。
您可以从 CDN 中引用 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>
注意-在本教程的所有章节中，我们都提到了 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>
这就是我们如何使用 body 部分中的
'data-bind' 属性将值从 ViewModel 绑定到 HTML 元素。
这里，'firstString' 指的是 ViewModel 变量。
this.firstString = ko.observable("Enter First String");
ko.observable 是一个关注值变化的概念，以便它可以更新底层的 ViewModel 数据。
为了更好地理解这一点，让我们将第一个输入框更新为"Hello"，将第二个输入框更新为"Lidihuo"。您将看到这些值同时更新。我们将在 KnockoutJS-Observables 章节中研究更多关于这个概念的内容。
this.thirdString = ko.computed(function() {
return this.firstString() + " " + this.secondString();
}, this);
接下来，我们在视图模型中计算了函数。此函数根据前面提到的 2 个字符串派生第三个字符串。因此，对这些字符串所做的任何更新都会自动反映在此派生字符串中。无需编写额外的代码来完成此操作。这只是一个简单的例子。我们将在KnockoutJS-Computed Observables一章中研究这个概念。
输出
将上述代码另存为
my_first_knockoutjs_program.html。在浏览器中打开此文件，您将看到如下输出。
将字符串修改为"Hello"和"Lidihuo"，输出变化如下。
