例説明:Observable
2641 ワード
基礎概念2:Observableとcomputed
KOのすべての適用シーンを見渡すと、基本的にこの2つの属性は少なくとも1つ使用されます.個人的にはKOが一番よく使うものだと思います.彼らの使い方は以下の通りです. Observable(モニタ属性):自身の属性の変化をモニタし、外部に通知を送信します.外部はsubscribeメソッドによって属性の変化イベントを購読する. Computed(依存プロパティ):以前のバージョンではdependentObservableと呼ばれていましたが、通常は他のObservableに依存し、計算によって独自のデータが得られます.依存項目が変更されると、computed属性は通知を受け、自身の を同期的に更新する.
例説明:Observable
基本構文
1、定義
KOのすべての適用シーンを見渡すと、基本的にこの2つの属性は少なくとも1つ使用されます.個人的にはKOが一番よく使うものだと思います.彼らの使い方は以下の通りです.
例説明:Observable
基本構文
1、定義
var myViewModel = {
personName: ko.observable('Bob'),// personName
personAge: ko.observable(123)// personAge
};
4、
myViewModel.personName.subscribe(function(newValue) {
alert("The person's new name is " + newValue);
});
htmlソース:<!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-3.0.0.js"></script>
<script src="../Scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var listMode = function () {
self = this;
self.firstName = ko.observable("5");
self.lastName = ko.observable("cihai");
self.fullName = ko.computed(function () {
return self.firstName() + self.lastName();
}, this);
self.firstName.subscribe(function (newValue) {
alert(newValue);
});
}
ko.applyBindings(new listMode());
});
</script>
</head>
<body>
<strong>firstName</strong><input data-bind="value: firstName" /><br />
<strong>lastName</strong><input data-bind="value: lastName" /><br />
<strong>fullName</strong><input data-bind="value: fullName" /><br />
<br />
<button type="button" onclick="show();"> </button>
</body>
</html>