KnockOutJS學(xué)習(xí)系列----(一)

? 好幾個(gè)月沒去寫博客了，最近也是因?yàn)轫?xiàng)目緊張，不過這個(gè)不是借口，J. 很多時(shí)候可能是因?yàn)槭虑橐欢?#xff0c;然后沒法靜下來心來去寫點(diǎn)東西，學(xué)點(diǎn)東西。

也很抱歉，突然看到好多的短消息，真不知道該如何給大家回復(fù)。。。

最近試著晚上抽時(shí)間寫一些knockoutjs和mvc的文章。這里先寫一點(diǎn)knockoutjs的東西。

關(guān)于knockoutjs到底是什么，如果你不知道，可以看看幾個(gè)月前我寫的一篇文章介紹它。

ASP.NET MVC框架下使用MVVM模式

? 我也是之前安裝了Visual Studio 11,今天的例子就是在VS11上去做的，順便看看VS11對Javascript有什么新的特性。

1. 如何使用Knockoutjs:

在knockoutjs中，每個(gè)HTML的DOM對象都是通過data-bind屬性來綁定數(shù)據(jù)的。首先你需要把knockoutjs添加到頁面中或者模板中。因?yàn)镸VC4模板里已經(jīng)默認(rèn)添加了knockoutjs，所以我就直接用啦。

開始使用ko(knockoutjs的縮寫),首先你需要定義一個(gè)viewmodel;

接下來需要做的是，把viewmodel的firstName和lastName兩個(gè)屬性綁定到HTML的DOM對象。

使用span來綁定：

使用input來綁定：

運(yùn)行結(jié)果：

因?yàn)閗o是MVVM模式，所以當(dāng)任何綁定了某個(gè)屬性的地方修改該屬性值時(shí)，其它地方也會(huì)隨之變化。就像上面的輸入框”First name”變化為”nic”時(shí)，那個(gè)span中得”nicholas”也會(huì)變?yōu)椤眓ic”。

2. 簡單的列表綁定：

對于列表的綁定，基本上是使用table。這里我們看如何使用ko把一個(gè)Array綁定到一個(gè)table中。因?yàn)槎鄺l數(shù)據(jù)就最好是使用模板了，所以我們結(jié)合jquery的模板插件來使用ko。

首先我們需要定義一個(gè)數(shù)組，然后定義一個(gè)ko的數(shù)組。

Ko有自己的數(shù)據(jù)定義，是availableArray;所以我們需要使用它的函數(shù)把我們定義好的數(shù)組給傳進(jìn)去，生成availableArray。

第二步是去定義一個(gè)jquery的模板，定義一個(gè)table,并把viewModel的數(shù)據(jù)綁定到模板中。

這里tbody的data-bind就是直接綁定template啦，對應(yīng)的需要給出綁定的模板Id，以及需要傳入到模板的數(shù)據(jù)源。

運(yùn)行看結(jié)果:

下次準(zhǔn)備使用jquery模板和ko寫一個(gè)比較好點(diǎn)的data grid.并從后臺(tái)異步傳輸數(shù)據(jù)。

轉(zhuǎn)載于:https://www.cnblogs.com/eedc/p/6072265.html

總結(jié)

以上是生活随笔為你收集整理的【转】ASP.NET MVC框架下使用MVVM模式-KnockOutJS+JQ模板例子的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。