Knockoutjs的环境搭建教程


Posted in Javascript onNovember 26, 2012

最近要在项目中使用Knockoutjs,因此今天就首先研究了一下Knockoutjs的环境搭建,并进行了一个简单的测试。
首先要到http://knockoutjs.com/index.html下载最新版本的Knockoutjs,笔者这里下载的是knockout-2.2.0.js。然后新建一个.html文件,在html文档中加入以下的语句导入此js:
<script type="text/javascript" src="knockout-2.2.0.js"></script>
到这里我们就已经可以编写Knockoutjs的代码了,我们以打印"Hello World !!"为例,编写以下的代码:

<script type="text/javascript" src="knockout-2.2.0.js"></script> 
<span data-bind="text:helloWorld"></span> 
<script type="text/javascript"> 
var AppViewModel = { 
helloWorld:'Hello World !!' 
}; 
ko.applyBindings(AppViewModel); 
</script>

然后使用浏览器打开此html文件,即可看到"Hello World!!"的字样。
在以上代码中:
<span data-bind="text:helloWorld"></span>
定义了一个span,并使用data-bind将helloWorld绑定到span上,这样span中的内容即为helloWorld变量中的内容。
<script type="text/javascript"> 
var AppViewModel = { 
helloWorld:'Hello World !!' 
}; 
ko.applyBindings(AppViewModel); 
</script>

在script中定义了一个AppViewModel,然后为其定义了一个变量:helloWorld,它的值为:Hello World!!,然后使用ko.applyBindings()方法将AppViewModel激活,这样才能在网页中看到此内容。
以上只是使用Knockoutjs做了一个非常简单的例子,在运行这个例子的过程中,出现了一个小小的问题,我也不是很清楚为什么。之前写的代码是:
<script type="text/javascript" src="knockout-2.2.0.js"></script> 
<script type="text/javascript"> 
var AppViewModel = { 
helloWorld: 'Hello World !!' 
}; 
ko.applyBindings(AppViewModel); 
</script> 
<span data-bind="text:helloWorld"></span>

我将<script>放到了<span>的前面,这样就显示不了任何的内容,不是很清楚其中的原因,还请大家指教。
Javascript 相关文章推荐
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
JS简单实现数组去重的方法示例
Mar 27 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
jquery ajax请求实例深入解析
Nov 26 #Javascript
jquery validate poshytip 自定义样式
Nov 26 #Javascript
一个可拖拽列宽表格实例演示
Nov 26 #Javascript
JS编程小常识很有用
Nov 26 #Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 #Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 #Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 #Javascript
You might like
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
Python计算IV值的示例讲解
2020/02/28 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
九年级科学教学反思
2014/01/29 职场文书
会计个人实习计划书
2014/08/15 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
详解Django的MVT设计模式
2021/04/29 Python
python中的被动信息搜集
2021/04/29 Python
Python OpenCV超详细讲解基本功能
2022/04/02 Python
Python&Matlab实现樱花的绘制
2022/04/07 Python
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL