只需要五个简单的步骤,就可以做好使用 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>

<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/ 去下载。

一旦你访问到 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 服务器,也同样从我们站点的根目录开始。

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

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

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

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

翻译:Knockout 快速上手 - 2: 安装 knockoutJS的更多相关文章

  1. 翻译:Knockout 快速上手 - 3: knockoutJS 快速上手

    许多时候,学会一种技术的有效方式就是使用它解决实际中的问题.在这一节,我们将学习使用 Knockout 来创建一个常见的应用,库存管理应用. 应用概览 在创建我们的应用之前,我们需要一个公司,来理解应 ...

  2. 翻译:Knockout 快速上手 - 5: 你需要知道的顶级特性 续

    Utilities Knockout 提供了许多可以你开发中使用的工具,你可以在 ko.utils 命名空间中找到它们,我最喜欢的工具如下所示: extend: 这个方法将两个对象合并在一起,调用这个 ...

  3. 翻译:Knockout 快速上手 - 4: 你需要知道的顶级特性

    Knockout 最棒的一个特点就是它的可扩展性.Knockout 存在大量的扩展点,包含大量的工具来创建我们的应用程序.许多开发者除了 Knockout 核心库之外没有使用任何其他的脚本库 ( 甚至 ...

  4. [翻译]lithium 快速上手(QuickStart)

      ​ 快速入门 经典博客教程 很感谢你尝试Li3!这一部分栏目为那些想了解这个框架可以做什么的php用户所设计.像这样深入代码是一种很好的方式去体会快速应用开发(Rapid Application ...

  5. Lombok快速上手(安装、使用与注解参数)

    目录 Lombok插件安装与使用说明 常见参数 lombok的依赖于安装 依赖管理 IDEA插件的安装 @Data小例子 扩展@ToString 构造器注解扩展 @Log及其他日志注解 资料链接 Lo ...

  6. knockoutJS 快速上手

    翻译:Knockout 快速上手 - 3: knockoutJS 快速上手 许多时候,学会一种技术的有效方式就是使用它解决实际中的问题.在这一节,我们将学习使用 Knockout 来创建一个常见的应用 ...

  7. 快速上手RaphaelJS-Instant RaphaelJS Starter翻译(一)

       (目前发现一些文章被盗用的情况,我们将在每篇文章前面添加原文地址,本文源地址:http://www.cnblogs.com/idealer3d/p/Instant_RaphaelJS_Start ...

  8. 【图文详解】scrapy安装与真的快速上手——爬取豆瓣9分榜单

    写在开头 现在scrapy的安装教程都明显过时了,随便一搜都是要你安装一大堆的依赖,什么装python(如果别人连python都没装,为什么要学scrapy….)wisted, zope interf ...

  9. 快速上手Ubuntu之安装篇——安装win7,Ubuntu16.04双系统【转】

    本文转载自:http://blog.csdn.net/qq_28205153/article/details/52203512 Linux可以说是开发者的系统,对于开发者来说,Linux发行版不仅为我 ...

随机推荐

  1. 试用fastJSON

    实体类 User.java package com.test.fastjson.entity; import java.util.Date; public class User { private L ...

  2. FDATool使用

    1. 幅值有两种单位可选,linear和db.切换单位时Toolbox的图例会跟着变化,可以看出两种单位下参数含义不太一样. 线性坐标:例如设置为0.01/0.01,表示通带幅度0.99~1.01,阻 ...

  3. bzoj4637: 期望

    Description 在米国有一所大学,名叫万国歌剧与信息大学(UniversalOperaandInformaticasUniversity).简称UOI大学.UO I大学的建筑与道路分布很有趣, ...

  4. HDU3516 树的构造

    题目大意:平面上有n个点,构成一个单调递减的序列.即对于任意的i<j,有xi<xj,yi>yj.现在要用一棵树连接这n个点.树边为有向边,只能向右或向上.求最小的权值. 分析:本题其 ...

  5. Python之re模块 —— 正则表达式操作

    这个模块提供了与 Perl 相似l的正则表达式匹配操作.Unicode字符串也同样适用. 正则表达式使用反斜杠" \ "来代表特殊形式或用作转义字符,这里跟Python的语法冲突, ...

  6. svn: E200030: sqlite[S10]: disk I/O error

    1. 经遇到的问题,它出现(在我的情况下,至少)要与TortoiseSVN的相互作用.禁用TortoiseSVN的图标缓存(设置>图标重载>缓存“无”>申请)拥有的一切工作就好了 ( ...

  7. 128. Longest Consecutive Sequence

    Given an unsorted array of integers, find the length of the longest consecutive elements sequence. F ...

  8. (C#) 创建单元测试(Unit Test).

    在VS2012中的右键中没有发现"Create Unit Test" 选项,原来需要安装个补丁: https://visualstudiogallery.msdn.microsof ...

  9. C#笔记一 .Net Framwork

    参考Learning hard本人在博客园的主页: http://www.cnblogs.com/zhili/     以及本书中的一些知识点: http://www.cnblogs.com/zhil ...

  10. HDU 2516 取石子游戏(斐波那契博弈)

    取石子游戏 Time Limit: 2000/1000 MS(Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submissi ...