簡介及教學輪不到小弟來做 請拜 估狗 & 網路神人
http://knockoutjs.com/index.html
黑大的 knockout 神文章
項目清單 這算是 經常遇到的 有點麻煩兒的 需求
麻煩的點不在於怎麼增減項目 而是有時候這個「項目」有點兒複雜
可能包了很多層 DIV 需要許多樣式 還有些按鈕跟功能
但是他們又是一塊塊 重複的 動態產生的 內容(物件)
用 javascript createElement() 來做的話 雖然效能好
jquery 問世後 藉由 $('<div>lalala~</div>') 的淫威之下 我可以直接由一般的 HTML 語法 來產生物件
這裡就來試試 knockout 及我最愛的 template 吧
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/knockout-2.2.1.debug.js"></script>
<style>
#myDiv
{
background-color: pink;
border: 1px solid black;
}
.myclass
{
color: red;
}
</style>
</head>
<body>
<div data-bind="template:
{ name: 'myTmp', foreach: ItemList }"></div>
</body>
<script id="myTmp" type="text/html">
<div id="myDiv" class="myclass">
<span data-bind="text: context"></span>
<input type="button" name="btn" value="按我吧~" data-bind="click:
$parent.ClickMe" />
</div>
</script>
<script type="text/javascript">
var ViewModel = {
ItemList: ko.observableArray(),
ClickMe: function (item) {
alert(item.context);
}
};
ko.applyBindings(ViewModel);
ViewModel.ItemList.push({ context: 'yoo~' });
ViewModel.ItemList.push({ context: 'noo~' });
ViewModel.ItemList.push({ context: 'woo~' });
</script>
</html>
沒有留言:
張貼留言