Knockout.js入门级
一、简单介绍
a.knockoutjs是什么？
KnockoutJS最早由Steve Sanderson，一个微软的雇员于2010年七月开发并且维护。
KnockoutJs是针对Web开发的MVVM(Model、View、View Model)框架,它使得业务逻辑代码与页面展示代码分割开，使得前端项目更好维护。
它能比较方便地封装、回显、校验form表单数据。
学习要求：了解基础的HTML、DOM和javascript知识。
KO支持所有主流的浏览器 IE 6+, Firefox 3.5+, Chrome, Opera, Safari等。
官方地址: http://knockoutjs.com/
中文API文档: http://www.aizhengli.com/knockoutjs/knockoutjs.html
b.为什么使用它？
1.KnockoutJS类库提供了简单和直接方式处理复杂的数据驱动接口。
2.使用纯Javasript类库并且可以和任何框架整合，它并不是jQuery类库的替代品， 但是可以作为高级特性的补充。
3.KnockoutJS类库文件非常轻量级。
4.KnockoutJS是独立的框架，兼容任何服务器或者客户端技术，KnockoutJS开源并且免费。
5.拥有完整的文档，官方的网站包含了API文档， 实际例子和互动教程等等。
c.主要特性
a.声明式绑定 - 使用非常简单的语法通过数据绑定属性将HTML DOM元素连接到模型，使得实现响应式非常简单
b.自动UI刷新 - 任何针对视图模型数据的改变都是立刻自动反应到UI，相反亦然， 不需要额外代码处理
c.追踪依赖 - KO属性和KO类库方法/属性的关系是透明的。 自动追踪KO中的数据属性变化，并且更新相关影响的区域
d.模板化 - 模板是简单方便的方式创建复杂的UI结构 - 拥有重复和嵌套的区域 （ 类似视图模型数据 ）
e.可扩展性 - 非常容易扩展自定义行为
二、基本语法
a.knockout.js引入
<script src="/js/jquery.min.js"></script> 基础
<script src="/js/knockout-3.4.2.js"></script> 核心
<script src="/js/knockout.validation.min.js"></script> 校验b.声明
var ExprModel = function(initData) {
var self = this;
self.bizletId = ko.observable(initData.bizletId);
self.bizletName = ko.observable(initData.bizletName).extend({
required: {
params: true
},
minLength: 2,
maxLength: 32,
pattern: {
params: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
message: "必须是中文字母数字下划线"
}
});
self.bizletLogicName = ko.observable("DEFAULT");
self.isLegal = ko.validatedObservable(true);
self.bizletExpr = ko.observable(initData.bizletExpr).extend({
required: {
params: true
},
minLength: 2,
maxLength: 512,
validation: {
validator: function(val,param){
return self.isLegal();
},
message:"表达式校验不通过"
}
});
self.bizletExpr.subscribe(function(){
$.ajax({
type: 'POST',
url: '/bizlet/checklogic',
data: JSON.stringify({expr:self.bizletExpr()}),
contentType:'application/json',
success: function(data){
if(data.bizCode == 'EBC000002'){
Ewin.confirm({message: data.bizMsg}).on(function(e){
if(!e){
return;
}
location.href = "/page/login";
});
return;
}
if(data.resultCode == 'NRC000000'){
self.isLegal(data.data.flag);
}else{
self.isLegal(false);
}
}
});
});
self.bizletDesc = ko.observable(initData.bizletDesc).extend({
maxLength: 128
});
self.score = ko.observable(initData.score).extend({
required: {
params: true
},
pattern: {
params: /^[-]?[0-9]+$/,
message: "请输入一个数字"
},
/*number: {
params: true
},*/
min: -10000,
max: 10000
});
self.isModified = ko.observable(false);
self.modify = function(){
self.isModified(true);
}
self.checked = ko.observable(false);
self.save = function () {
}
self.isValid = function(){
self.errors = ko.validation.group(self);
if (self.errors().length == 0) {
return true;
}
self.errors.showAllMessages();
return false;
}
};c.激活
全部激活：
ko.applyBindings(myViewModel);
ko.applyBindings(new viewModel(initData));
部分激活：
ko.applyBindings(myViewModel, document.getElementById('someElementId'));d.绑定
单向绑定：(jsp + js)
<div>
<p>First name: <input data-bind="value: firstName" /></p>
</div>
<script>
function ViewModel() {
this.firstName = "Tommy";
}
ko.applyBindings(new ViewModel());
</script>双向绑定：(jsp + js)
<div>
<p>First name: <input data-bind="value: firstName" /></p>
</div>
<script>
function ViewModel() {
this.firstName = ko.observable("Tommy");
}
ko.applyBindings(new ViewModel());
</script>三、开发应用
a.初始化模型
b.定义form表单数据对象
c.定义事件
js部分
jsp部分
四、核心总结
学习Java的同学注意了！！！
学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入Java学习交流群，群号码：543120397 我们一起学Java！