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入门学习资料收集整理篇
Jul 06 Javascript
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
通过layer实现可输入的模态框的例子
Sep 27 Javascript
vue实现简单数据双向绑定
Apr 28 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 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
Javascript执行效率全面总结
2013/11/04 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
Express的路由详解
2015/12/10 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
python利用hook技术破解https的实例代码
2013/03/25 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
jupyter notebook 多行输出实例
2020/04/09 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
python设置表格边框的具体方法
2020/07/17 Python
python操作链表的示例代码
2020/09/27 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
创业计划书如何编写
2014/02/06 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
2015年科室工作总结
2015/04/10 职场文书
2016年教师新年寄语
2015/08/18 职场文书
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL