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中onclick(this)用法介绍
Apr 19 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
javascript实现加载xml文件的方法
Nov 24 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
webpack4实现不同的导出类型
Apr 09 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 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实现文件安全下载
2006/10/09 PHP
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
php格式化json函数示例代码
2016/05/12 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
js的2种继承方式详解
2014/03/04 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
深入理解angular2启动项目步骤
2017/07/15 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
Python中实现参数类型检查的简单方法
2015/04/21 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
pymysql模块使用简介与示例
2020/11/17 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
销售自我评价
2013/10/22 职场文书
总经理驾驶员岗位职责
2013/12/04 职场文书
公务员转正考察材料
2014/02/07 职场文书
冰雪公主观后感
2015/06/16 职场文书
Go Plugins插件的实现方式
2021/08/07 Golang