KnockoutJS学习与应用
KnockoutJS初认识
KnockoutJs是针对Web开发的MVVM框架(Model、View、View Model)
题外话：
Mvvm是Model-View-ViewModel的简写。即模型-视图-视图模型。
【模型】指的是后端传递的数据。
【视图】指的是所看到的页面。
【视图模型】是mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。MVVM流程图如下：
u=32561255,2826043542&fm=173&app=25&f=JPEG.jpg
KnockoutJS 优点：
- 业务逻辑代码与页面展示代码分割开，让前端项目更好可以维护
- 能比较方便地封装、回显、校验form表单数据
- 使用纯Javasript类库并可以和任何框架整合，它不是jQuery类库的替代品
- KnockoutJS类库提供了简单和直接方式处理复杂的数据驱动接口
KnockoutJS 特性：
- 声明式绑定： 使用非常简单的语法通过数据绑定属性将HTML DOM元素连接到模型，使得实现响应式非常简单
- 自动UI刷新： 任何针对视图模型数据的改变都是立刻自动反应到UI，相反亦然， 不需要额外代码处理
- 追踪依赖： KO属性和KO类库方法/属性的关系是透明的。 自动追踪KO中的数据属性变化，并且更新相关影响的区域
- 模板化： 模板是简单方便的方式创建复杂的UI结构 - 拥有重复和嵌套的区域 （ 类似视图模型数据 ）
- 可扩展性： 非常容易扩展自定义行为
KnockoutJS 语法
简单示例
<script src="/js/knockout-3.4.2.js"></script> 核心
<script src="/js/knockout.validation.min.js"></script> 校验
<input data-bind="value: userName,valueUpdate: 'change'"/>
var viewModel = { userName: ko.observable("") };//声明
ko.applyBindings(viewModel);//在KnockoutJS中激活这个属性
data-bind 介绍
"value:username"指的是绑定一个名字为username的字段
"valueUpdate: 'change'"表示自定义事件
如果使用valueUpdate参数，意味着KO将使用自定义的事件而不默认的事件。
ko.applyBindings() 介绍
ko.applyBindings(obj,[node]) 接收两个参数，第一个参数是创建的对象，第二个参数设置要绑定的HTML元素或容器，同一个容器内只能进行一次激活
ko.observable() 介绍
<input data-bind="value: personName">
var myViewModel = {personName: ko.observable()};
当input里面的值改变的时候，同时会将值赋给personName，然后就能在myViewModel 对象里面通过 myViewModel.personName()查看
通过ko可以绑定：
- 控制文本和外观
- 控制流
- 使用表单字段
- 渲染模版
官方地址: http://knockoutjs.com/
中文API文档: http://www.aizhengli.com/knockoutjs/knockoutjs.html
版权声明：文章内容总结于网络，如侵犯到原作者权益，请与我联系删除或授权事宜
网友评论