<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ko</title>
<script src="js/knockout-3.4.2.js"></script>
</head>
<body>
<div id="one">
Price: <input type="text" data-bind="value: price" placeholder="请输入单价" /><br>
count: <input type="text" data-bind="value: count" placeholder="请输入数量" /><br>
sum: <span data-bind="text: sum"></span>
</div>
<script>
var ViewModel = function(p, c) {
// 设置为可观察对象并以参数p、c初始化
this.price = ko.observable(p);
this.count = ko.observable(c);
// 调用ko函数的时候将this传入,
// 否则执行ko.pureComputed内部代码时,this为ko,ko.price()报错。
this.sum = ko.pureComputed(function() {
// 因为可观察对象是一个函数对象,所以要用price()来读取当前值。
// 设置值使用price(NewValue),支持链式写法:this.price(12).count(3)
return this.price() * this.count();
}, this);
};
var vm = new ViewModel(135, 10);
// 应用该绑定,绑定开始生效
ko.applyBindings(vm);
</script>
</body>
</html>
ko.html ko初体验
最新推荐文章于 2022-06-16 15:02:22 发布