knockout.js
1.创建数据模型和监控属性
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8" />
<script type="application/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
<h1>姓名:<strong data-bind="text:personName"></strong></h1>
<h2>年龄:<strong data-bind="text:personAge"></strong></h2>
<input id="txtName" type="text" data-bind="value:personName">
<input id="txAge" type="text" data-bind="value:personAge" />
<br />
<button onclick="cancelSubscribe()">取消订阅</button>
<script>
var subscription=null;
var ViewModel1={
personName:ko.observable("123"),//KO的双向绑定
personAge:ko.observable()//
};
ko.applyBindings(ViewModel1);//激活KO
//开启订阅
subscription=ViewModel1.personAge.subscribe(function (newValue) {
if(isNaN(newValue)){
alert("请输入数字！");
ViewModel1.personAge("");
}
});
function cancelSubscribe() {
if (subscription) {
subscription.dispose();//取消订阅
}
}
</script>
</body>
</html>
2.自动计算属性
2.1 Computed Observable
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="UTF-8">
<script type="application/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
firstName is <span data-bind="text:firstName"></span><br/>
lastName is <span data-bind="text:lastName"></span><br />
fullName is <span data-bind="text:fullName"></span><br/>
<input type="text" data-bind="value:firstName" /><br/>
<input type="text" data-bind="value:lastName" /><br />
<script type="application/javascript">
function viewModel() {
var self =this;
self.firstName = ko.observable("");
self.lastName =ko.observable("");
//this关键字 计算属性
self.fullName = ko.computed(function () {
return self.firstName()+'.'+self.lastName();
},self);
}
ko.applyBindings(viewModel);
</script>
</body>
</html>
2.2 分解用户输入
<!DOCTYPE html>
<html lang="en">
<head>
<title>分解用户输入</title>
<meta charset="UTF-8">
<script type="application/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
firstName is <span data-bind="text:firstName"></span><br/>
lastName is <span data-bind="text:lastName"></span><br />
fullName is <span data-bind="text:fullName"></span><br/>
<input type="text" data-bind="value:firstName" /><br/>
<input type="text" data-bind="value:lastName" /><br />
<input type="text" data-bind="value:fullName" />
<script type="application/javascript">
function ViewModel() {
var self =this;
self.firstName = ko.observable("");
self.lastName =ko.observable("");
self.fullName=ko.computed({
read: function () { //读取 显示
return this.firstName() + " " + this.lastName();
},
write:function (value) { //输入的操作
var lastSpacePos = value.lastIndexOf(" ");
if(lastSpacePos>0){
this.firstName(value.substring(0, lastSpacePos));
this.lastName(value.substring(lastSpacePos + 1));
}
},
owner:self
});
}
ko.applyBindings(ViewModel);
</script>
</body>
</html>
2.3 值的转换（value 转换）
<!DOCTYPE html>
<html lang="en">
<head>
<title>value值转换</title>
<meta charset="UTF-8">
<script type="application/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
数字是 <span data-bind="text:price "></span><br/>
价格是 <input type="text" data-bind="value:formattedPrice" /><br/>
<script>
function viewModel() {
var self=this;
self.price = ko.observable(12.445);
self.formattedPrice=ko.computed({
read:function () {
return '$' + self.price().toFixed(2);//
},
write:function (value) {
value = parseFloat(value.replace(/[^\.\d]/g, ""));//
self.price(isNaN(value) ? 0 : value);//
},
owner:self
});
}
ko.applyBindings(viewModel);
</script>
</body>
</html>
2.4 筛选和验证用户输入
<!DOCTYPE html>
<html lang="en">
<head>
<title>筛选和验证用户输入</title>
<meta charset="UTF-8">
<script type="application/javascript" src="../js/knockout-3.1.0.js"></script>
</head>
<body>
请输入新的价格：<input id="txtNumber" type="text" data-bind="value:attemptedValue"/>
<div data-bind="visible:!lastInputWasValid()">
<font color="red">请输入数字！</font>
</div>
<script>
function MyViewModel() {
this.acceptedNumericValue = ko.observable(123);
this.lastInputWasValid = ko.observable(true);//控制显示 true/false
this.attemptedValue = ko.computed({//输入的值
read: this.acceptedNumericValue,
write: function (value) {
if (isNaN(value))
this.lastInputWasValid(false);
else {
this.lastInputWasValid(true);
this.acceptedNumericValue(value);
}
},
owner: this
});
}
ko.applyBindings(new MyViewModel());
</script>
</body>
</html>