knockoutJS学习指南

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学习指南相关推荐

AutoCAD.net/Map 3D/AIMS/MapGuide/Civil 3D二次开发学习指南
作者:杜长宇 Autodesk Infrastructure Map Server(AIMS)/MapGuide API二次开发学习指南 Autodesk Infrastructure Map Ser ...
推荐10个很棒的AngularJS学习指南
AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...
《CCNP ROUTE 300-101学习指南》——2.6节复习题
本节书摘来自异步社区<CCNP ROUTE 300-101学习指南>一书中的第2章,第2.6节复习题,作者 [美]戴安娜蒂尔(Diane Teare) , 鲍勃瓦尚(Bob Vacho ...
《CCNA学习指南：Cisco网络设备互连（ICND1）（第4版）》——1.13节生产网络模拟问题1-1...
本节书摘来自异步社区<CCNA学习指南:Cisco网络设备互连(ICND1)(第4版)>一书中的第1章,第1.13节生产网络模拟问题1-1,作者[美]Anthony Sequeira,更多 ...
【 Linux 】Vim学习指南
本文转载自:Vim学习指南你想尽可能快地自学vim(为大家所熟知的最好的编辑器) .这是我学习的方法:从细处入手然后慢慢掌握所有技巧. Vim 六十亿美元的编辑器设计优良,强壮,快速. 学习vim ...
HBase学习指南之HBase原理和Shell使用
HBase学习指南之HBase原理和Shell使用参考资料: 1.https://www.cnblogs.com/nexiyi/p/hbase_shell.html,hbase shell 转载于: ...
git学习指南_几十张动图告诉你 Git到底是怎么玩的
点击上方"Java学习指南 "关注我 , 加个"星标",每天阅读Java干货文章来源:机器之心git merge.git rebase.git reset.g ...
2019年python课本_2019年Python学习指南
Python是一种用LISP和Java编译的语言,JPthon提供了访问Java图像用户界面的途径,可以让他使用可移植的GUI演示和可移植的http/ftp/html库,因此非常适合作为人工智能语言. ...
Flutter学习指南：文件、存储和网络
Flutter学习指南交互.手势和动画 UI布局和控件熟悉Dart语言编写第一个应用开发环境搭建本篇文章我们先学习 Flutter IO 相关的基础知识,然后在 Flutter学习指南:交互 ...

knockoutJS学习指南

knockoutJS学习指南相关推荐

最新文章

热门文章