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！

Knockout.js入门级相关推荐

JQuery Ajax 与 Knockout.js的结合
项目中遇到太多JQuery Ajax 与 Knockout.js的结合来处理数据的情况,今天将这部分内容梳理一下.一来弄清楚二者结合处理数据的流程,二来是感觉二者结合在一起用的时候有点将二者搞混了,弄 ...
【ASP.NET Web API教程】2.3.5 用Knockout.js创建动态UI
[ASP.NET Web API教程]2.3.5 用Knockout.js创建动态UI 原文:[ASP.NET Web API教程]2.3.5 用Knockout.js创建动态UI 注:本文是[ASP ...
Knockout.Js案例一Introduction
在这第一个教程中,您将体验的一些基本知识构建的web UI Model-View-ViewModel使用knockout.js(MVVM)模式. 案例1:添加:data-bind <p>F ...
MVVM(Knockout.js)的新尝试：多个Page，一个ViewModel
对于面向数据的Web应用来说,MVVM模式是一项不错的选择,它借助JS框架提供的"绑定"机制是我们无需过多关注UI(HTML)的细节,只需要操作绑定的数据源.MVVM最早被微软应用 ...
MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录...
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
Knockout.js 初探
Knockout.js是什么? Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的 ...
knockout.js的简介和简单使用
1.knockout简介 knockout是一个轻量级的UI类库,通过MVVM模式使JavaScript前端UI简单化 knockout有四大重要概念: 1)声明式绑定:使用简明移读的语法很容易地将模 ...
Dva.js 入门级教学文档-1
Dva.js 入门级教学文档-1 简介一.介绍 1.什么是 dva 2.dva 的作用是什么二.环境搭建和使用 1.环境搭建 2.创建项目 3.使用 antd 三.全局架构 1.index.js( ...
Knockout JS 示例
五个小例子,来自Knockout JS官方网站. //tutorial 1 //following codes uses to demonstrate observable values and ta ...
Knockout.js 整理
上个月做项目需要用到easyui和Knockout.js ,所以简单的整理了下,以便学习 Knockout.js 是一个JavaScript库,它可以让HTML控件很容易与数据进行绑定.使用的是&qu ...

Knockout.js入门级

文章目录

Knockout.js入门级

一、简单介绍

a.knockoutjs是什么？

b.为什么使用它？

c.主要特性

二、基本语法

a.knockout.js引入

b.声明

c.激活

d.绑定

三、开发应用

a.初始化模型

b.定义form表单数据对象

c.定义事件

四、核心总结

Knockout.js入门级相关推荐

最新文章

热门文章