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