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 !!"為例，編寫以下的代碼：
<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)容。
<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è)小小的問題，我也不是很清楚為什么。之前寫的代碼是：
<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)容，不是很清楚其中的原因，還請(qǐng)大家指教。
首先要到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)容，不是很清楚其中的原因，還請(qǐng)大家指教。
您可能感興趣的文章:
- KnockoutJS 3.X API 第四章之事件event綁定
- KnockoutJS 3.X API 第四章之表單submit、enable、disable綁定
- KnockoutJS 3.X API 第四章之表單value綁定
- BootstrapTable與KnockoutJS相結(jié)合實(shí)現(xiàn)增刪改查功能【二】
- BootstrapTable與KnockoutJS相結(jié)合實(shí)現(xiàn)增刪改查功能【一】
- Bootstrap與KnockoutJs相結(jié)合實(shí)現(xiàn)分頁效果實(shí)例詳解
- Knockoutjs快速入門(經(jīng)典)
- KnockoutJS 3.X API 第四章之click綁定
相關(guān)文章
這篇文章主要介紹了JavaScript 詳解預(yù)編譯原理的相關(guān)資料,需要的朋友可以參考下2017-01-01
JS實(shí)現(xiàn)簡單的星期格式轉(zhuǎn)換功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)簡單的星期格式轉(zhuǎn)換功能,涉及JavaScript基于Date()對(duì)象的日期時(shí)間操作技巧,需要的朋友可以參考下2018-07-07
js 動(dòng)態(tài)為textbox添加下拉框數(shù)據(jù)源的方法
這篇文章主要介紹了js 動(dòng)態(tài)為textbox添加下拉框數(shù)據(jù)源的方法,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了Javascript中prototype屬性的相關(guān)資料，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-09-09
快速解決js動(dòng)態(tài)改變dom元素屬性后頁面及時(shí)渲染的問題
下面小編就為大家?guī)硪黄焖俳鉀Qjs動(dòng)態(tài)改變dom元素屬性后頁面及時(shí)渲染的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07![js判斷IE6/IE7/FF的代碼[XMLHttpRequest]](http://img.jbzj.com/images/xgimg/bcimg5.png)
js判斷IE6/IE7/FF的代碼[XMLHttpRequest]
js下通過XMLHttpRequest判斷IE6/IE7/FF的代碼，需要的朋友可以參考下。2011-02-02
Map對(duì)象在JavaScript中提供了一種靈活且高效的鍵值對(duì)存儲(chǔ)方式,它具有許多實(shí)用的方法,如set()、get()、has()和delete()等,使得操作和管理鍵值對(duì)變得更加簡單,這篇文章主要介紹了JS中map屬性,需要的朋友可以參考下2024-08-08
electron實(shí)現(xiàn)讀取和寫入配置文件的示例詳解
這篇文章主要介紹了electron實(shí)現(xiàn)讀取和寫入配置文件的示例,文中通過代碼示例和圖文結(jié)合的方式介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了微信小程序新聞網(wǎng)站詳情頁的實(shí)例代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
跳轉(zhuǎn)到另一個(gè)頁面的方法有很多，在本文將為大家詳細(xì)介紹下js中如何實(shí)現(xiàn)5秒后跳轉(zhuǎn)到另一個(gè)頁面，感興趣的朋友可不要錯(cuò)過2013-10-10