- 是實現MVVM設計模式的Framework。
- 下載點 https://github.com/SteveSanderson/knockout
- Knockoutjs可以與Jquery搭配使用。
特性：
- Elegant dependency tracking (優雅的依賴跟蹤)：
當你的data model改變時，都會自動更新對應UI。 - Declarative bindings (宣告綁定)：
簡易的方式將你的UI與Data Model建立關聯(bindings)。 - Trivially extensible (容易擴展)：
只需要幾行代碼即可實現自訂行為作為新的聲明綁定。
好處：
- Pure Javascript Library ：
純Javascript類別庫，能運行於Server或是Client端。 - Can be added on top of your existing web application：
能添加到現行的應用程序中，而不需大架構改變。 - Compact：
小巧的，壓縮後只有13kb。 - Works on any mainstream browser：
能運行在任何的主流瀏覽器上(IE 6+, Firefox 2+, Chrome, Safari, others)。 - Comprehensive suite of specifications (developed BDD-style)：
採用行為驅動開發 - 意味著在新的瀏覽器與平台上可以容易通過驗證。
核心功能：
- Observables and dependency tracking：
當data model改變時能夠自動更新UI。 - Declarative bindings：
簡易語法能容易的將model關聯到DOM元素上。 - Templating：
使用嵌套模板可以建立複雜的介面。
載入：
<script type='text/javascript' src='knockout-2.1.0.js'></script>
example：
example：
<!DOCTYPE html>
<html>
<head>
<title>easy example</title>
<meta charset="UTF-8"/>
<script src="lib/jquery-1.7.1.min.js"></script>
<script src="lib/knockout-2.1.0.js"></script>
<script>
$(document).ready(function(){
var myViewModel =
{
myData: ko.observableArray([ '一月', '二月', '三月', '四月' ])
};
ko.applyBindings(myViewModel);
});
</script>
</head>
<body>
<ul data-bind="foreach: myData">
<li>
<span>當前項目：</span><b data-bind="text: $data"></b>
</li>
</ul>
第一項為：<span data-bind="text:myData()[0]"></span></br>
陣列長度：<span data-bind="text:myData().length"></span></br>
</body>
</html>
<html>
<head>
<title>easy example</title>
<meta charset="UTF-8"/>
<script src="lib/jquery-1.7.1.min.js"></script>
<script src="lib/knockout-2.1.0.js"></script>
<script>
$(document).ready(function(){
var myViewModel =
{
myData: ko.observableArray([ '一月', '二月', '三月', '四月' ])
};
ko.applyBindings(myViewModel);
});
</script>
</head>
<body>
<ul data-bind="foreach: myData">
<li>
<span>當前項目：</span><b data-bind="text: $data"></b>
</li>
</ul>
第一項為：<span data-bind="text:myData()[0]"></span></br>
陣列長度：<span data-bind="text:myData().length"></span></br>
</body>
</html>
結果：
- 當前項目： 一月
- 當前項目： 二月
- 當前項目： 三月
- 當前項目： 四月
陣列長度：4
沒有留言:
張貼留言