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 相关文章推荐
初步认识JavaScript函数库jQuery
Jun 18 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
js实现无缝滚动特效
Dec 20 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
JS原型与继承操作示例
May 09 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
详解CocosCreator消息分发机制
Apr 16 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
无限级别菜单的实现
2006/10/09 PHP
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
javascript eval函数深入认识
2009/02/21 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
简单学习vue指令directive
2016/11/03 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
js实现选项卡效果
2020/03/07 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
python清除函数占用的内存方法
2018/06/25 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
小学教师师德师风演讲稿
2014/08/22 职场文书
旷工检讨书1000字
2015/01/01 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
中秋节感想
2015/08/10 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
导游词之昭君岛
2020/01/17 职场文书
python字符串的一些常见实用操作
2022/04/06 Python
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS