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 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
javascript replace()正则替换实现代码
Feb 26 Javascript
关于this和self的使用说明
Aug 01 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
理解JavaScript中的对象
Aug 25 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 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
在Debian系统下配置LNMP的教程
2015/07/09 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
用python处理图片实现图像中的像素访问
2018/05/04 Python
django如何连接已存在数据的数据库
2018/08/14 Python
python看某个模块的版本方法
2018/10/16 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
python开发入门——set的使用
2020/09/03 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
构造方法和其他方法的区别
2016/04/26 面试题
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
个人党性剖析材料
2014/02/03 职场文书
同事吵架检讨书
2014/02/05 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
群众路线调研报告范文
2014/11/03 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
归途列车观后感
2015/06/17 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
python高温预警数据获取实例
2022/07/23 Python