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 UI震动效果实现原理及步骤
Feb 04 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
网页javascript精华代码集
2007/01/24 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
python图片合成的示例
2020/11/09 Python
python元组拆包实现方法
2021/02/28 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
印尼购物网站:iLOTTE
2019/10/16 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
医学生个人求职信范文
2013/09/24 职场文书
新三好学生主要事迹
2014/01/23 职场文书
新闻发布会策划方案
2014/06/12 职场文书
2014年消防工作总结
2014/11/21 职场文书