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动画3.创建一个带遮罩效果的图片走廊
Aug 24 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
vue实现整屏滚动切换
Jun 29 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 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
PHP怎样调用MSSQL的存储过程
2006/10/09 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
php中this关键字用法分析
2016/12/07 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
动态创建类实例代码
2009/10/07 Python
python读取word文档的方法
2015/05/09 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
python读取几个G的csv文件方法
2019/01/07 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
Python数据库小程序源代码
2019/09/15 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
总经理助理岗位职责
2013/11/08 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
如何写好竞聘报告
2019/04/03 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL