DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Knockoutjs的環境搭建教程
Knockoutjs的環境搭建教程
編輯:關於JavaScript     
最近要在項目中使用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>的前面,這樣就顯示不了任何的內容,不是很清楚其中的原因,還請大家指教。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved