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 相关文章推荐
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
js实现小球在页面规定的区域运动
Jun 16 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
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
PHP的开发框架的现状和展望
2007/03/16 PHP
php auth_http类库进行身份效验
2009/03/19 PHP
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
php实现上传图片文件代码
2015/07/19 PHP
PHP count()函数讲解
2019/02/03 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
js中的闭包实例展示
2018/11/01 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
python xml解析实例详解
2016/11/14 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
Python是如何进行类型转换的
2013/06/09 面试题
毕业生大学生活自我总结
2014/01/31 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
行政助理工作职责范本
2014/03/04 职场文书
协议书格式
2014/04/23 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
学生检讨书怎么写
2015/05/07 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
Django程序的优化技巧
2021/04/29 Python
linux下安装redis图文详细步骤
2021/12/04 Redis