差分
ナビゲーションに移動
検索に移動
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name : <strong data-bind="text: lastName"></strong></p>
</body>
</html>
</source>
computedメソッドで関数をバインドできる。
<source lang="html5">
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Knockoutjs - Test01</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="knockout-2.0.0.js"></script>
<script type="text/javascript">
jQuery(function() {
// ready関数
// knockoutjsはDOMが準備されてからじゃないと動かないよ。
// モデル
var AppViewModel = function() {
// observable
this.firstName = ko.observable("Mono");
this.lastName = ko.observable("Book");
// computed
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
this.capitalizeLastName = function() {
var currentVal = this.lastName();
this.lastName(currentVal.toUpperCase());
};
};
// バインディング
ko.applyBindings(new AppViewModel());
});
</script>
</head>
<body>
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name : <strong data-bind="text: lastName"></strong></p>
<p>Full name : <strong data-bind="text: fullName"></strong></p>
<button data−bind="click: capitalizeLastName">Go caps</button>
</body>
</html>
