knockout.js是什么?
knockout.js是一个js库,它拥有MVVM模型,可以实现页面的自动更新,以及对页面数据的实时监听。也就是说如果你需要去改变页面,那么只需要去更改页面所依赖的数据就行,对数据进行操作就可以达到改变页面的目的,而不需要亲自去操作DOM,简便而又快捷。
<div>
<input data-bind="value: name" type="text" placeholder="请输入您的姓名">
<p data-bind="text: name"></p>
</div>
var viewModel = {
name: ko.observable("ccc")
};
ko.applyBindings(viewModel);
上述代码表明了,通过data-bind绑定的name字段,当页面发生修改时,name也会发生变化。下面p标签的内容随着上面input输入的内容改变而改变,那么说明name这个字段是具有响应式的。
applyBinding && Observables
ko调用applyBinding激活viewModel,把viewModel与view层中的data-bind所绑定的字段所绑定起来。
ko调用observable方法能够得到一个函数,把这个函数给在view绑定的字段,可供view显示,在js中如果需要更改它则需要调用observable返回的函数,并且把要改的值作为参数传进去。
var viewModel = {
name: ko.observable("ccc")
};
const handleBtn = () => {
viewModel.name("name");
}
computed 、visible && click绑定
计算属性通常用于一个结果依赖其他的observable字段。
visible用来控制标签的可见性,值为boolean
click用户绑定点击事件,需要注意的是无法像以前一样使用onclick绑定点击事件
<button data-bind="click: handleChange" id="btn">修改</button>
<div data-bind="visible: shouldShowMessage">
<p>You will see this message only when "shouldShowMessage" holds a true value.</p>
</div>
<div>
<p>first Name: <span data-bind="text: firstName"></span></p>
<p>last Name: <span data-bind="text: lastName"></span></p>
<p>full Name: <span data-bind="text: fullName"></span></p>
</div>
// 响应数据源,供applyBindings激活
var viewModel = {
shouldShowMessage: ko.observable(false), // Message initially visible
firstName: ko.observable('孙'),
lastName: ko.observable('悟空'),
fullName: ko.observable('')
};
ko.applyBindings(viewModel);
// 调用ko的computed使用viewModel中的observable属性来计算出fullName
const getFullName = ko.computed(function () {
return this.firstName() + ' ' + this.lastName();
}, viewModel);
function handleChange() {
// 通过button的点击来改变标签的可见性
viewModel.shouldShowMessage(viewModel.shouldShowMessage() ? false : true);
viewModel.fullName(getFullName());
}
结果:
foreach绑定
foreach用于循环遍历数组,之后进行渲染
<table style="border: 1px solid black; padding: 0px; border-collapse: collapse;">
<thead>
<tr><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: people" >
<tr>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table>
td, th {
border: 1px solid black;
margin: 0px;
padding: 0;
border-spacing: 0px;
}
ko.applyBindings({
people: [
{ firstName: 'Bert', lastName: 'Bertington' },
{ firstName: 'Charles', lastName: 'Charlesforth' },
{ firstName: 'Denise', lastName: 'Dentiste' }
]
});
如果数组的每一项元素是基本数据类型,那么可以使用data-bind=“text: $data”
fruits: ["apples", "banana", "orange", "starwberry"]
<ul data-bind="foreach: fruits">
<li data-bind="text: $data"></li>
</ul>
如上图所示可以兼容不同的数据类型
event绑定
给标签元素绑定事件,通常用于keypress、mouse等
<div data-bind="event: {mouseover: handleOver, mouseout: handleOut}">详情</div>
<div data-bind="if: isEnable">鼠标进入</div>
ko.applyBindings({
isEnable: ko.observable(false),
handleOver: function() {
this.isEnable(true);
},
handleOut: function() {
this.isEnable(false);
}
})
这里的事件响应函数可以是任何的函数,可以是在applyBindings中也可以是在外面,或者直接把函数写在标签中也是可以的。
value绑定
value的值是view和viewModel绑定的值,主要用户input、textarea、select等标签上。
<div>
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<button data-bind="click: handleChange, text: textValue()">修改</button>
<br>
<br>
<div data-bind="visible: isEdit">
First name: <input placeholder="请输入你要修改的值" data-bind="value: firstName" /><br><br>
Last name: <input placeholder="请输入你要修改的值" data-bind="value: lastName" />
</div>
</div>
function viewModel(firstName, lastName, changeStatus) {
this.firstName = ko.observable(firstName);
this.lastName = ko.observable(lastName);
this.isEdit = ko.observable(false);
this.textValue = ko.observable(changeStatus);
}
const vm = new viewModel('Bert', "ccc", "修改")
ko.applyBindings(vm)
function handleChange() {
vm.isEdit(vm.isEdit() ? false : true);
vm.textValue(vm.isEdit() ? "隐藏" : "修改");
console.log(vm.isEdit(), vm.textValue());
}
结果:
if绑定
if绑定可以动态的控制某个组件动态的显示,if绑定会修改DOM结构所以需要频繁切换DOM的话,建议使用visible绑定
submit绑定
用户处理form表单上的默认事件,可以是点击事件也可以是键盘事件。
with绑定
标签中的上下文绑定
<div data-bind="with: acticle">
<p>title: <span data-bind="text: title"></span></p>
<p>message: <span data-bind="text: message"></span></p>
</div>
var article = {
title: '人文科学',
message: 'the humanities'
}
var article1 = {
title: '复制品',
}
var viewModel = {
acticle: ko.observable(article),
article1: ko.observable(article1)
};
ko.applyBindings(viewModel);
结果:上述盒子中上下文是article,因此所展示的title和message是article中的。