翻译：Knockout 快速上手 - 2: 安装 knockoutJS

最新推荐文章于 2024-10-15 11:10:10 发布

weixin_34144450

最新推荐文章于 2024-10-15 11:10:10 发布

阅读量130

点赞数

文章标签： javascript 操作系统开发工具 ViewUI

本文介绍使用Knockout开发Web应用程序的基本步骤，包括环境搭建、脚本文件创建及调试等关键环节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只需要五个简单的步骤，就可以做好使用 Knockout 开发的准备！

第一步我们需要什么？

最低限度，为了完成后面的教程，你需要如下的准备

Web 浏览器
文本编辑器
你的电脑上大约 2M 的磁盘空间
基本的 Web 服务器

Knockout 的开发可以在大多数你可以安装上面软件的操作系统上进行。

为了完成这个教程，我将会使用 Chrome 浏览器。这个浏览器是免费的，并且可以安装在多个操作系统上，包括 Windows操作系统和Mac 操作系统。你可以在这里 http://www.google.com/chrome 下载这个软件。我选择的文本编辑器也会同时兼顾到文本编辑工作和 web 服务器。我将会使用微软的 WebMatrix 开发工具。这个免费的工具工作在 Windows 操作系统之上。可以从这里下载 http://www.microsoft.com/web/webmatrix/ 这个软件。我会使用 IIS Express 作为基本的 Web 服务器。它可以从这里下载：http://www.microsoft.com/en-us/download/details.aspx?id=1038。如果你使用的是 Mac 系统或者 Linux 系统，这些系统中也有大量很棒的文本编辑器和 Web 服务器可以免费下载和使用。

当然，如果你使用 VS 进行学习的话，那就什么都有了。

第二步创建一个起始站点

现在，工具已经有了，我们需要一个工作平台来开始应用的开发，我使用工作台这个词，是因为在这个教程中，我们将会创建许多不同的文件。一些被简单的用来作为示例，其它的一些将会作为应用的一部分。在开始学习的时候，我通常建议在你的计算机的某个方便的地方，比如桌面上，创建一个文件夹来包含我们将要使用的所有文件及其文件夹。我创建的文件夹如下图所示。

Js 文件夹中将会用来保存我们所有的脚本文件，css 文件夹中将会用来保存项目中使用的所有的样式文件。我们可以通过许多途径来创建这样的文件结构，我最喜爱的方式是访问http://html5boilerplate.com/ 网站，然后下载这里的模版。这个网站提供了站点的结构 ( 或者样板 ) ，其中包含许多你不会想到处理的内容，比如一个 robots.txt 文件。

一旦你创建了网站的结构，确认你创建了名为 index.html 的首页文件。在这个教程中，我们的首页如下所示：

<!DOCTYPE html>

<head>

<title>Knockout Starter Guide</title>

</head>

<body>

<p>Hello World!</p>

</div>

</body>

</html>

这将是我们应用的起点，我们为脚本和样式表提供了占位符。

第三步下载 Knockout

现在，魔术开始了，为了创建 Knockout 应用，我们必须拥有 Knockout 脚本库，最好的办法就是到 Knockout 官方网站http://www.knockoutjs.com/ 去下载。

一旦你访问到 Knockout 站点，点击页面上部的 Download/Install 链接，然后按照页面提示进行下载。

我们的教程使用knockout-2.3.0.debug.js 脚本库，我们将需要把这个文件保存到 Js 文件夹中。

第四步创建应用的主脚本文件

现在，我们需要创建用来保存所有脚本的脚本文件了，我们需要创建名为 app.js 的脚本文件。把它保存到 js 文件夹中。开始的时候，文件中是包含下面内容的空的脚本文件。

// main application code here

现在，Knockout 脚本库已经下载了，我们的主脚本文件也已经创建了。我们需要在 index.html 文件中包含这些脚本文件。我们使用经典的 script 标记来引用脚本文件。下面的示例演示了如何在页面的底部引用脚本文件。

<!DOCTYPE html>

<head>

<title>Knockout Starter Guide</title>

</head>

<body>

<p>Hello World!</p>

</div>

</body>

</html>

有一些原因使我们将脚本文件在页面的底部进行引用，第一个原因是可以使页面更快地呈现在用户面前，因为可视的标记在脚本之前被加载和处理了。这样，在脚本下载和处理的过程中，页面就可以显示在浏览器的窗口中，第二，Knockout 是通过浏览器的 Document Object Model ( DOM ) 工作的，为了使这个机制工作，就需要浏览器首先创建页面的 DOM 模型，在 Knockout 工作之前，创建和渲染内部部分。还有需要有利的原因使得我们将脚本在页面的底部进行引用，但是，这些讨论已经超出了本教程的范围，所以，作为一个最佳实践，我们将脚本放置在页面的底部，来为用户创建最佳的使用体验。

第五步运行应用

现在，我们的站点已经创建起来了。运行一下，确认一切可以正常工作。我正在使用 WebMatrix，所以，在 Index.html 文件上点击运行，如果你使用其它的 Web 服务器，也同样从我们站点的根目录开始。

在我的截图中，可以看到 WebMatrix 使用端口 11790 作为网站的服务端口。这个端口依赖于你使用的电脑。Hello, world. 就是我们 index.html 页面中当前的内容。棒极了！我们已经拥有了正在工作的 JavaScript 脚本应用。

为了确认我们的脚本正确工作，没有任何 bug 存在。我们需要启动浏览器的开发人员工具，在 Chrome 浏览器中，点击位于右上角的快捷图标，找到工具 -> 开发人员工具，调试器就会出现在浏览器窗口的下部，看起来如下所示。

如果点击调试器的 Source 窗格，我们会看到被加载到页面中的 Javascript 脚本，在下一个截图中，可以看到 app.js 和刚刚下载的 knockout 脚本库被正确加载了。还有重要的是，页面中没有任何的 javascript 错误。我们还可以看到在调试器的右下角没有任何的错误警告。如果页面中出现任何问题，就会在这里看到一个警示图标和表示错误数量的数字。