「knockout.jsで共通処理のクラス化」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

knockout.jsで共通処理のクラス化

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>knockout.jsで共通処理のクラス化</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="knockout-2.1.0beta.js"></script>
<script type="text/javascript">
// knockout.js ===============================================
var ko001 = function()
{
var self = this;
self.iptVal = ko.observable("");
self.evClick = function(a, b)
{
self.iptVal(b.target.innerText);
i=0;
}
}
function ViewModel() {
var self = this;
self.test = [
new ko001(),
new ko001(),
];
self.testA = new ko001();
self.testB = new ko001();
}
$(document).ready(function () {
ko.applyBindings(new ViewModel());
});
</script>
<style type="text/css">
</style>
</head>
<body>
<h1>knockout.jsで共通処理のクラス化</h1>
<div>
<input type="text" data-bind="value: test[0].iptVal" />
<button data-bind="click: test[0].evClick">配列のひとつめ</button><br />
<input type="text" data-bind="value: test[1].iptVal" />
<button data-bind="click: test[1].evClick">配列のふたつめ</button><br />
<input type="text" data-bind="value: testA.iptVal" />
<button data-bind="click: testA.evClick">別インスタンスのひとつめ</button><br />
<input type="text" data-bind="value: testB.iptVal" />
<button data-bind="click: testB.evClick">別インスタンスのふたつめ</button><br />
</div>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>