knockoutJS学习指南
来源:互联网 发布:什么天气软件最准确 编辑:程序博客网 时间:2024/05/21 10:02
Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化。
Knockout是在下面三个核心功能是建立起来的:
- 监控属性(Observables)和依赖跟踪(Dependency tracking)
- 声明式绑定(Declarative bindings)
- 模板(Templating)
MVVM and View Models
Model-View-View Model (MVVM) 是一种创建用户界面的设计模式。 描述的是如何将复杂的UI用户界面分成3个部分:
- model: 你程序里存储的数据。这个数据包括对象和业务操作(例如:银子账户可以完成转账功能), 并且独立于任何UI。使用KO的时候,通常说是向服务器调用Ajax读写这个存储的模型数据。
- view model: 在UI上,纯code描述的数据以及操作。例如,如果你实现列表编辑,你的view model应该是一个包含列表项items的对象和暴露的add/remove列表项(item)的操作方法。
注意这不是UI本身:它不包含任何按钮的概念或者显示风格。它也不是持续数据模型 – 包含用户正在使用的未保存数据。使用KO的时候,你的view models是不包含任何HTML知识的纯JavaScript 对象。保持view model抽象可以保持简单,以便你能管理更复杂的行为。
- view: 一个可见的,交互式的,表示view model状态的UI。 从view model显示数据,发送命令到view model(例如:当用户click按钮的时候) ,任何view model状态改变的时候更新。
使用KO的时候,你的view就是你带有绑定信息的HTML文档,这些声明式的绑定管理到你的view model上。或者你可以使用模板从你的view model获取数据生成HTML。
创建一个view model,只需要声明任意的JavaScript object。例如:
var myViewModel = { personName: 'Bob', personAge: 123};
你可以为view model创建一个声明式绑定的简单view。例如:下面的代码显示personName 值:
The name is <span data-bind="text: personName"></span>
Activating Knockout
data-bind属性尽快好用但它不是HTML的原生属性(它严格遵从HTML5语法, 虽然HTML4验证器提示有不可识别的属性但依然可用)。由于浏览器不识别它是什么意思,所以你需要激活Knockout 来让他起作用。
激活Knockout,需要添加如下的 <script> 代码块:
ko.applyBindings(myViewModel);
你可以将这个代码块放在HTML底部,或者放在jQuery的$函数或者ready 函数里,然后放在页面上面, 最终生成结果就是如下的HTML代码:
The name is <span>Bob</span>
改进
例如:将上述例子的view model改成如下代码:
var myViewModel = { personName: ko.observable('Bob'), personAge: ko.observable(123)};
你根本不需要修改view – 所有的data-bind语法依然工作,不同的是他能监控到变化,当值改变时,view会自动更新。
- knockoutJS学习指南
- knockoutjs一 关于knockoutjs
- 学习指南
- 学习指南
- 学习指南
- Knockoutjs介绍
- knockoutjs visible
- Knockoutjs介绍
- KnockoutJS 实例
- KnockoutJS简介
- knockoutjs介绍
- KnockOutJS入门
- 初识KnockoutJS
- 初步认识knockoutjs
- Knockoutjs环境搭建
- knockoutjs的学习
- knockOutJs学习-1
- knockOutJs学习-2
- java tomcat内存溢出
- HashMap、Hashtable、ConcurrentHashMap等深入分析
- Smarty学习笔记——条件判断语句、循环语句和文件引用
- oracle中日期格式的转换
- 练习1-g
- knockoutJS学习指南
- ld: 1 duplicate symbol for architecture arm64 clang: error: linker command failed with exit code 1 (
- MySQL max_allowed_packet设置及问题
- 剑指offer-面试题17:合并两个排序的链表
- Reorder List
- 抽象类和接口
- Spring与redis的集成的笔记
- LayoutInflater
- spring实现AOP的两种方式以及实现动态代理方式