Knockoutjs环境搭建

最新推荐文章于 2021-08-06 22:44:05 发布

转载最新推荐文章于 2021-08-06 22:44:05 发布 · 359 阅读

第三方专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何使用Knockoutjs实现文本绑定，包括导入库、创建ViewModel及应用到HTML页面上的操作。

首先要到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 !!"为例，编写以下的代码：

<span data-bind="text:helloWorld"></span>
<script type="text/javascript" src="knockout-2.2.0.js"></script>
<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激活，这样才能在网页中看到此内容。

注意：将<script>放到了<span>的前面，这样就显示不了任何的内容。

原因可能<span>还没render出来，script当然找不到吧

或者将脚本写在 $(function(){
//在这个里面写内容
});

或者写到onload 里面

一般先写span，再引ko库，再加自己的脚本，按这样顺序来，一般不会有问题。

http://www.cnblogs.com/wukong65/archive/2012/11/26/2789334.html