knockoutJS

knockoutJS

只需要五个简单的步骤,就可以做好使用 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 进行学习的话,那就什么都有了。

第二步 创建一个起始站点

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

 knockoutJS_第1张图片

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

 knockoutJS_第2张图片

 

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <title>Knockout Starter Guide</title>

    <!-- CSS Here-->

</head>

<body>

    <div id="content">

        <p>Hello World!</p>

    </div>

    <!-- JavaScript Files Here -->

</body>

</html>

 

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

 

第三步 下载 Knockout

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

 knockoutJS_第3张图片

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

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

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

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

// main application code here

 

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <title>Knockout Starter Guide</title>

    <!-- CSS Here-->

</head>

<body>

    <div id="content">

        <p>Hello World!</p>

    </div>

    <!-- JavaScript Files Here-->

    <script type="text/javascript" src="/JS/knockout-2.1.0.debug.js"></script>

    <script type="text/javascript" src="/JS/App.js"></script>

</body>

</html>

 

 

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

第五步 运行应用

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

 knockoutJS_第4张图片

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

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

 knockoutJS_第5张图片

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

 knockoutJS_第6张图片

如果你没有使用 Chrome 浏览器,你可以搜索你的浏览器的文档来查看如何捕获和显示 JavaScript 错误。

 

 
分类:  javascript

你可能感兴趣的:(knockout)