基础概念二:Observable与computed
纵观KO的所有应用场景,基本上这2个属性至少会用到一个。个人认为这是KO最常使用的东西。他们用法如下:
- Observable(监控属性):监控自身属性的变化,向外部发送通知。外部通过subscribe方法来订阅属性的变化事件。
- Computed(依赖属性):在早期版本中叫做dependentObservable,它通常依赖于其他的Observable,通过计算得出自己的数据。当依赖项改变的时候,computed属性会接到通知,然后同步更新自身
实例讲解: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" οnclick="show();">显示</button>
</body>
</html>