📅  最后修改于: 2023-12-03 14:50:39.162000             🧑  作者: Mango
KnockoutJS是一种JavaScript库,用于实现基于MVVM(Model-View-ViewModel)模式的用户界面。它使用可观察对象(observable objects)和绑定(bindings)来构建动态页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>KnockoutJS Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js" integrity="sha384-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" crossorigin="anonymous"></script>
</head>
<body>
<h1>KnockoutJS Demo</h1>
<div data-bind="text: message"></div>
<script>
var viewModel = {
message: ko.observable('Hello, KnockoutJS!')
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
可观察对象是KnockoutJS中的核心概念,是一个带有"通知功能"的JavaScript对象。当可观察对象的值发生变化时,会自动触发绑定的更新操作。
var viewModel = {
name: ko.observable('Alice'),
age: ko.observable(18),
isMale: ko.observable(false)
};
var name = viewModel.name(); // Alice
viewModel.name('Bob');
viewModel.name.subscribe(function(newValue) {
console.log("Name changed to " + newValue);
});
绑定是指将可观察对象与页面元素或JavaScript表达式关联起来,使得它们之间可以进行双向数据绑定。KnockoutJS提供了多种绑定方式,包括基本绑定和高级绑定。
将可观察对象的值作为文本内容显示在页面上。
<div data-bind="text: message"></div>
将可观察对象的值作为元素属性的值。
<img data-bind="attr: { src: avatarUrl, alt: name }">
根据可观察对象的值动态设置元素的样式。
<div data-bind="style: { color: textColor }">Text with color</div>
根据可观察对象的值控制元素的可见性。
<div data-bind="visible: isVisible">Visible when true</div>
根据可观察对象的数组循环生成相应的HTML元素。
<ul data-bind="foreach: items">
<li data-bind="text: $data"></li>
</ul>
KnockoutJS还支持高级绑定,如事件绑定、表单绑定、组合绑定等。
将可观察对象的方法与事件关联起来,使得事件触发时可调用方法。
<button data-bind="click: handleButtonClick">Click me</button>
将可观察对象与表单元素关联起来,实现表单数据的双向绑定。
<input type="text" data-bind="value: inputText">
将多个绑定组合起来,实现更为复杂的效果。
<div data-bind="css: { 'active': isActive }, text: message"></div>
KnockoutJS是一款优秀的MVVM框架,具有易学易用,代码清晰和可扩展等优点。它为我们开发高质量的Web应用程序提供了便利和效率。