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写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 Javascript
setTimeout学习小结
Feb 08 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 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
Django中的cookie与session操作实例代码
2017/08/17 PHP
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
Python yield与实现方法代码分析
2018/02/06 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
学生发电厂实习自我鉴定
2013/09/22 职场文书
测试工程师职业规划书
2014/02/06 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
公证委托书
2014/08/01 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
python tkinter模块的简单使用
2021/04/07 Python
golang中的struct操作
2021/11/11 Golang