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框架中DOMReady事件的实现小结
Feb 12 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
javascript对象的创建和访问
Mar 08 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
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中MVC的开发经验分享
2012/05/17 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
PHP 错误处理机制
2015/07/06 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
php中strtotime函数性能分析
2016/11/20 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
Python os.access()用法实例
2019/02/18 Python
python移位运算的实现
2019/07/15 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
python 模拟登录B站的示例代码
2020/12/15 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
商务英语应届生自我鉴定
2013/12/08 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
公司合作协议范文
2014/10/01 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python
JS ES6异步解决方案
2021/04/29 Javascript
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript