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 相关文章推荐
在chrome中window.onload事件的一些问题
Mar 01 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
JS快速实现简单计算器
Apr 08 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 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
mac下多个php版本快速切换的方法
2016/10/09 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
Python闭包实现计数器的方法
2015/05/05 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
Python读写docx文件的方法
2018/05/08 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
详解Python中的type和object
2018/08/15 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
python3获取url文件大小示例代码
2019/09/18 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
行政总经理岗位职责
2013/12/05 职场文书
小学英语教学反思
2014/01/30 职场文书
采购部部长岗位职责
2014/02/06 职场文书
创先争优个人承诺书
2014/08/30 职场文书
合作协议书范本
2014/10/25 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
五一晚会主持词
2015/07/01 职场文书
老人院义工活动感想
2015/08/07 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python