快捷導(dǎo)航

Knockoutjs的環(huán)境搭建教程

更新時(shí)間：2012年11月26日 17:34:13 作者：

最近要在項(xiàng)目中使用Knockoutjs，因此今天就首先研究了一下Knockoutjs的環(huán)境搭建，并進(jìn)行了一個(gè)簡單的測試,需要的朋友可以了解下

最近要在項(xiàng)目中使用Knockoutjs，因此今天就首先研究了一下Knockoutjs的環(huán)境搭建，并進(jìn)行了一個(gè)簡單的測試。
首先要到http://knockoutjs.com/index.html下載最新版本的Knockoutjs，筆者這里下載的是knockout-2.2.0.js。然后新建一個(gè).html文件，在html文檔中加入以下的語句導(dǎo)入此js：
<script type="text/javascript" src="knockout-2.2.0.js"></script>
到這里我們就已經(jīng)可以編寫Knockoutjs的代碼了，我們以打印"Hello World !!"為例，編寫以下的代碼：

復(fù)制代碼代碼如下:

 
<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>
定義了一個(gè)span，并使用data-bind將helloWorld綁定到span上，這樣span中的內(nèi)容即為helloWorld變量中的內(nèi)容。

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
var AppViewModel = { 
helloWorld:'Hello World !!' 
}; 
ko.applyBindings(AppViewModel); 
</script> 

在script中定義了一個(gè)AppViewModel，然后為其定義了一個(gè)變量：helloWorld，它的值為：Hello World!!，然后使用ko.applyBindings()方法將AppViewModel激活，這樣才能在網(wǎng)頁中看到此內(nèi)容。
以上只是使用Knockoutjs做了一個(gè)非常簡單的例子，在運(yùn)行這個(gè)例子的過程中，出現(xiàn)了一個(gè)小小的問題，我也不是很清楚為什么。之前寫的代碼是：

復(fù)制代碼代碼如下:

 
<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>的前面，這樣就顯示不了任何的內(nèi)容，不是很清楚其中的原因，還請大家指教。

您可能感興趣的文章: