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 相关文章推荐
asp 的 分词实现代码
May 24 Javascript
ext jquery 简单比较
Apr 07 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
Vue3.0数据响应式原理详解
Oct 09 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
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
php的access操作类
2008/04/09 PHP
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
php实现微信支付之退款功能
2018/05/30 PHP
js下弹出窗口的变通
2007/04/18 Javascript
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
javascript数组使用调用方法汇总
2007/12/08 Javascript
jQuery select的操作实现代码
2009/05/06 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
pandas中Timestamp类用法详解
2017/12/11 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
python程序如何进行保存
2020/07/03 Python
python实现ping命令小程序
2020/12/28 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
结婚纪念日感言
2015/08/01 职场文书
运动会广播稿200字
2015/08/19 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android