发布于 2016-12-29 00:48:22 | 114 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程，程序狗速度看过来！

Knockout.js JavaScript的UI库

Knockout 是个JavaScript library，帮助创建丰富的显示和编辑器UI，通过干净的底层数据模型。你可以在任何时候动态更新UI的选择部分。

---

最近要在项目中使用Knockoutjs，因此今天就首先研究了一下Knockoutjs的环境搭建，并进行了一个简单的测试,需要的朋友可以了解下
最近要在项目中使用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>的前面，这样就显示不了任何的内容，不是很清楚其中的原因，还请大家指教。