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 相关文章推荐
JS控制表格隔行变色
Jun 26 Javascript
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 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 OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
vue实现分页组件
2020/06/16 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
跟老齐学Python之复习if语句
2014/10/02 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
什么是组件架构
2016/05/15 面试题
优秀辅导员事迹材料
2014/02/16 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
python获取字符串中的email
2022/03/31 Python