KnockOutJS學習系列----(一)

? 好幾個月沒去寫博客了，最近也是因為項目緊張，不過這個不是借口，J. 很多時候可能是因為事情一多，然后沒法靜下來心來去寫點東西，學點東西。

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

最近試著晚上抽時間寫一些knockoutjs和mvc的文章。這里先寫一點knockoutjs的東西。

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

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

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

1. 如何使用Knockoutjs:

在knockoutjs中，每個HTML的DOM對象都是通過data-bind屬性來綁定數據的。首先你需要把knockoutjs添加到頁面中或者模板中。因為MVC4模板里已經默認添加了knockoutjs，所以我就直接用啦。

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

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

使用span來綁定：

使用input來綁定：

運行結果：

因為ko是MVVM模式，所以當任何綁定了某個屬性的地方修改該屬性值時，其它地方也會隨之變化。就像上面的輸入框”First name”變化為”nic”時，那個span中得”nicholas”也會變為”nic”。

2. 簡單的列表綁定：

對于列表的綁定，基本上是使用table。這里我們看如何使用ko把一個Array綁定到一個table中。因為多條數據就最好是使用模板了，所以我們結合jquery的模板插件來使用ko。

首先我們需要定義一個數組，然后定義一個ko的數組。

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

第二步是去定義一個jquery的模板，定義一個table,并把viewModel的數據綁定到模板中。

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

運行看結果:

下次準備使用jquery模板和ko寫一個比較好點的data grid.并從后臺異步傳輸數據。

轉載于:https://www.cnblogs.com/eedc/p/6072265.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。