「Knockout.js」の版間の差分
imported>Administrator |
imported>Administrator |
||
| 50行目: | 50行目: | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
<title> | <title>knockout.js - Test02</title> | ||
<script type="text/javascript" src="jquery-1.5.1.min.js"></script> | <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" src="knockout-2.0.0.js"></script> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
jQuery(function() { | jQuery(function() { | ||
// ready関数 | // ready関数 | ||
// knockoutjsはDOMが準備されてからじゃないと動かないよ。 | // knockoutjsはDOMが準備されてからじゃないと動かないよ。 | ||
// モデル | // モデル | ||
function AppViewModel() { | |||
// observable | // observable | ||
this.firstName = ko.observable("Mono"); | this.firstName = ko.observable("Mono"); | ||
| 68行目: | 69行目: | ||
return this.firstName() + " " + this.lastName(); | return this.firstName() + " " + this.lastName(); | ||
}, this); | }, this); | ||
} | } | ||
// バインディング | // バインディング | ||
ko.applyBindings(new AppViewModel()); | ko.applyBindings(new AppViewModel()); | ||
}); | })(); | ||
</script> | </script> | ||
</head> | </head> | ||
<body> | <body> | ||
<p>First name: <input | <p>First name: <input data-bind="value: firstName" /></p> | ||
<p>Last name : <input | <p>Last name: <input data-bind="value: lastName" /></p> | ||
<p>Full name : <strong data-bind="text: fullName"></strong></p> | <p>Full name: <strong data-bind="text: fullName"></strong></p> | ||
</body> | </body> | ||
</html> | </html> | ||