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 相关文章推荐
jQuery.ajax 用户登录验证代码
Oct 29 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
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
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python调用新浪微博API项目实践
2014/07/28 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
浅析PEP572: 海象运算符
2019/10/15 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
揠苗助长教学反思
2014/02/04 职场文书
八一建军节活动方案
2014/02/10 职场文书
读书活动实施方案
2014/03/10 职场文书
幼儿园评语大全
2014/04/17 职场文书
2014年团工作总结
2014/11/27 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书