Knockout.js是什么?
Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你的局部UI内容需要自动更新(比如:依赖于用户行为的改变或者外部的数据源发生变化),KO都可以很简单的帮你实现,并且非常易于维护。
- 笔者在最近开发项目需要兼容ie8的这个框架是同事提出来的,它本身不赖任何库,它兼容ie所有版本。配合着jquery开发会让项目开发的更有效率。为大家整理了以下代码方便大家查阅。如果你开发得项目不是特别的大用笔者分享的就可以完成了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Knockout.js如何使用</title>
<!-- knockout 如何使用 正确排除开发遇见的问题 -->
<style>
.Hide{
color: red;
}
.Show{
color: green;
}
</style>
</head>
<body>
<div id="main">
循环对象:<ol data-bind="foreach:arrObject"><li data-bind="text:name"></li></ol>
循环数组:<ul data-bind="foreach:arrArray"><li><span data-bind="text:$data"></span>----<i data-bind="text:$parent.moduleId"></i></li></ul>
双向绑定:<span data-bind="text:moduleId"></span>
<input data-bind="value:moduleId" /><br />
下拉框:<select data-bind="options:selectUp,optionsText:'name',optionsValue:'id',value:selectUpId,optionsCaption: '----全部----'"></select><br />
下拉框选中Id:<span data-bind="text:selectUpId"></span><br />
if判断:<span data-bind="if:ifType">if==true</span><br />
计算属性:<span data-bind="text:fullName"></span><br />
Visible绑定:<span data-bind="visible: shouldShowMessage">Visible==true</span><br />
class绑定:<span data-bind="css: { Hide: currentProfitClass() > 0,Show:currentProfitClass() < 0 }">class绑定变为红色</span><br/>
style绑定:<span data-bind="style: { color: currentProfitStyle() > 0?'red':'green' }">style绑定变为红色</span><br/>
attr绑定:<a data-bind="attr: {href:pathUrl},css: { Hide: currentProfitClass() > 0,Show:currentProfitClass() < 0 }">a链接动态添加href</a><br/>
<div>
<input type=checkbox data-bind="checked:IsAll"/>全选
<ul data-bind="foreach: report"><li><input type="checkbox" data-bind="checked: checks" /><span data-bind="text: name"></span></li></ul>
</div>
普通点击事件:<button data-bind="click:incrementClickCounter">按钮</button><br/>
循环普通点击事件:<ul data-bind="foreach:selectUp"><button data-bind="text:'点击按钮'+($index()+1),event:{click:$parent.selectUpClick}"></button></ul>
传参点击事件:<button data-bind="click:incrementClickCounterParams.bind($data,2)">按钮</button><br/>
循环传参点击事件:<ul data-bind="foreach:selectUp"><button data-bind="text:'点击按钮'+($index()+1),event:{click:$parent.selectUpParamsClick.bind($data,name)}"></button></ul>
</div>
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/knockout/3.5.1/knockout-latest.min.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script> -->
<script>
var PagedGridModel = function () {
var _self=this;
// 循环对象
this.arrObject = ko.observableArray([{
name: '张三',
id: 10
}, {
name: '李四',
id: 20
}, {
name: '王五',
id: 40
}]);
// *注 $parent 在循环中使用 获取父级元素
// 循环数组
this.arrArray = ko.observableArray([1, 2, 3, 4]);
// select 下拉框 /** 注:写下拉框的时候一定不要使用foreach属性,虽然可以实现,但在ie低**/
/**版本中会出现下拉框倒序问题。是可以解决的,需要消耗性能,尽量不要用foreach 求解决方法的小伙伴去评论吧~~**/
this.selectUp = ko.observableArray([{
name: '张三1',
id: 1
}, {
name: '张三2',
id: 2
}, {
name: '张三3',
id: 3
}]);
this.selectUpId = ko.observable(2);
// 双向绑定
this.moduleId = ko.observable(100);
// if
this.ifType = ko.observable(true);
// 计算属性 实时更新
self.firstName = ko.observable('Bob');
self.lastName = ko.observable('Smith');
this.fullName = ko.computed(function () {
return this.firstName() + " " + this.lastName();
})
// Visible绑定通过绑定一个值来确定DOM元素显示或隐藏 与if区别 if不会去渲染出dom visible只是display:none
this.shouldShowMessage = ko.observable(true);
// css class 绑定
this.currentProfitClass=ko.observable(-1);
// style 绑定
this.currentProfitStyle=ko.observable(100);
// attr属性绑定
this.pathUrl=ko.observable('https://blog.csdn.net/momoomom');
// 全选/全不选
this.report=ko.observableArray([{checks:false,name:'选择1',key:1},{checks:false,name:'选择2',key:2},{checks:false,name:'选择3',key:3}]);
this.IsAll=ko.observable(false);
this.IsAll.subscribe(function (nvalue) {
if (nvalue) {
var s = _self.report();
_self.report([]);
for (var i = 0; i < s.length; i++) {
s[i].checks = true;
}
_self.report(s);
} else{
var s = _self.report();
_self.report([]);
for (var i = 0; i < s.length; i++) {
s[i].checks = false;
}
_self.report(s);
}
});
this.incrementClickCounter=function(){
console.log('我只是点击事件')
};
this.selectUpClick=function(row,e){
console.log('我是循环点击事件',row,e,this)
};
this.incrementClickCounterParams=function(...args){
console.log(args)
};
this.selectUpParamsClick=function(...args){
console.log(args)
}
}
ko.applyBindings(new PagedGridModel(), document.getElementById('main'));
</script>
- 中文文档地址:http://aizhengli.com/knockoutjs/knockoutjs.html
- 英文文档地址:https://knockoutjs.com/
- CDN地址:https://www.bootcdn.cn/knockout/3.5.1/
- 欢迎小伙伴们前来评论呀。