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 操作css实现代码
Jun 11 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 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
ThinkPHP表单自动验证实例
2014/10/13 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
python利用7z批量解压rar的实现
2019/08/07 Python
python中几种自动微分库解析
2019/08/29 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
购房意向书
2014/04/01 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
开发房地产协议书
2014/09/14 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
幼儿园见习报告
2014/10/30 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL