knockout.js简单实用教程1
第一次接触knockout是在一年多之前吧。当时是接手了一个别人的项目,在项目中有用到knockout来进行数据的绑定。也就开始学习起来knockout。在之后的项目中也多次用到了这个。在第一次开始学习的时候也遇到了一些困难。所以呢想写一篇比较入门的教程让大家来了解和使用knockout,其实所有的使用方法都可以去官网的文档里去查看里面写的很详细。我这里呢是为了那些还不习惯看英文文档并且刚入门的人看得(PS:坏习惯得改啊因为大部分文档都是英文的)
废话不多说了。先简单说明一下是knockout ,knockout.js是一个轻型的MVVM前台框架,说简单一点就是用来绑定数据的。它的优点是如果数据源发送改变那么它会自动刷新数据,而不需要你手动的再次绑定,第二个好处前后台代码的分离也就是MVVM的思想吧。以为ASP.NETMVC为例吧。在ASP.NETMVC中如果你需要绑定数据你要怎么做,以往的做法是把数据给到viewdata里面,然后在前台用razor语法进行绑定也就是通过后台代码进行绑定。但是它带来的问题是你需要加各种判断来去除为空的情况,否则就会出现讨厌的黄页了。而且你没办法异步的刷新页面.而通过knockout你就完全不需要考虑这个问题了,这也就是MVVM带来的好处。我只需要处理json数据就行了。关于介绍就说这么多了。其他的好处你们在使用中慢慢体会吧.
在是用knockout之前,你需要了解几个概念
首先是Viewmodel 这个模型和MVC的model不是一个东西。这个viewmodel一个JS对象
像这样的
var myViewModel = {personName: 'Bob',personAge: 123 };
在一个页面中你可以声明多个VM模型。但是我不建议这么做。原因后面我会讲到。
knockout绑定的基本语法是
The name is <span data-bind="text: personName"></span>
在标签中直接打上属性data-bind来实现绑定。支持文本绑定,html绑定,属性绑定,css绑定等等。我就不一一列举了想要了解详情的同学可以去knockout官网查看地址是 http://knockoutjs.com/documentation/introduction.html
knockout的语法是非常的灵活的。很多语法当你不知道怎么写的时候你可以试试就按你平时写后台代码的语法试试说不定就可以了。当然查官方文档还是最快的方式了。
上面的绑定还差最后一步那就是
ko.applyBindings(myViewModel);
把模型绑定到document里,当然你也可以把数据绑定到具体的document对象上比如,div,table之类语法和上面的类型
ko.applyBindings(myViewModel,document.getElementById("具体的dom对象的id"));
上面的这边绑定方式呢比较死。因为数据是写死的那如何动态的绑定呢?也就是数据源改变了页面自动更新 ,这里就要介绍observables语法了 observables简单来说就是自动绑定。如果元数据改变了的话它会自动更新它自己。下面给个列子
// 当前模型 var ViewModel = function(first, last) {this.firstName = ko.observable(first);this.lastName = ko.observable(last);this.fullName = ko.pureComputed(function() {// 当firstname改变是会更新模型return this.firstName() + " " + this.lastName();}, this); };ko.applyBindings(new ViewModel("Planet", "Earth")); //给定初始值并进行绑定
这个是JS创建模型和模型绑定的代码相信大家能看的明白。简单说明一下大概的意思就是创建一个模型。模型有两三个字段其中两个通过自动绑定标识的也就意味着当他被改变的时候模型会自动更新。也就意味着。第三个字段会自动进行更新。下面给出绑定代码。
<p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
在这个地址 http://jsfiddle.net/rniemeyer/bxfXd/ 可以调试这个代码. 相信看完这段代码大家能明白什么是自动更新数据了吧.
一般呢在页面上我们还需要给dom对象绑定上事件。那么在knockout里面是怎么绑定事件的呢?下面给出说明,照例先贴出来一段代码
var ClickCounterViewModel = function() {this.numberOfClicks = ko.observable(0);this.registerClick = function() {this.numberOfClicks(this.numberOfClicks() + 1);};this.resetClicks = function() {this.numberOfClicks(0);};this.hasClickedTooManyTimes = ko.pureComputed(function() {return this.numberOfClicks() >= 3;}, this); };ko.applyBindings(new ClickCounterViewModel());
上面的代码。相信大家也都能看的明白。很简单的逻辑就用来统计点击次数。如果用面向对象的思想来看的话。就是说一个“对象”有各种各样的属性,比如姓名啊性别啊之类 称之为对象的属性。也有各种的行为,比如吃饭啊走路啊。这称之为对象的行为。这里的属性对象对象的就是ko(knockout后文中都以此来替代)的字段了,对象的行为也就是ko里面的js事件了。绑定ko的话可以称为对象的初始化. 以上这些解释呢是为了让读者能更方面的理解ko的模型的含义。说了这么多那怎么绑定事件呢?下面给出dom绑定的代码
<div>You've clicked <span data-bind='text: numberOfClicks'> </span> times</div><button data-bind='click: registerClick, disable: hasClickedTooManyTimes'>Click me</button><div data-bind='visible: hasClickedTooManyTimes'>That's too many clicks! Please stop before you wear out your fingers.<button data-bind='click: resetClicks'>Reset clicks</button> </div>
同上也给出调试的地址 http://jsfiddle.net/rniemeyer/3Lqsx/
相信看完上面的内容。大家对ko已经有了一定的了解了 下面在说明如何绑定json对象。这也是我们用的最多的方式了。这里在结合前面的绑定方式做一个总的例子,
下面的例子中有绑定事件,绑定简单数据和数组集合.废话不多说直接上代码.
第一步当然还是创建模型对象了
var SimpleListModel = function(items) {this.items = ko.observableArray(items);this.itemToAdd = ko.observable("");this.addItem = function() {if (this.itemToAdd() != "") {this.items.push(this.itemToAdd()); // 把你输入的文本插入到数组里.this.itemToAdd(""); // 清空itemtoadd字段的文本内容 }}.bind(this); };ko.applyBindings(new SimpleListModel(["Alpha", "Beta", "Gamma"]));//这里可以进行初始化你可以把你拿到的json数据直接丢进去就行了
在创建这个模型对象的时候我对第一个属性的类型的声明为 ko.observableArray() ,上面的例子用的是ko.observable 他们两个的区别的是 绑定单个字符还是绑定数组集合,只有这点区别。其他的都是一样的,你要是把VM当做一个对象来处理就更好理解了。就是相当于对象里字段的类型一个是int 一个是list<int>。
下面直接给出绑定dom的代码
<form data-bind="submit: addItem">New item:<input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' /><button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button><p>Your items:</p><select multiple="multiple" width="50" data-bind="options: items"> </select> </form>
调试地址 http://jsfiddle.net/rniemeyer/bxfXd/
相信看过之前的内容后看这个绑定的话应该也可以容易理解了。从这里也可以看出来ko的语法是非常灵活的。可以非常随意的去写。这也是脚本语言的优势。
看到这里大家应该对ko的整体和简单的使用有了一定的了解,也肯定会有很多的疑问(可以直接文章下面留言提出来)。但是到这并没有结束。在以后的时间里我会继续完成这一系列的关于ko的教程。这其中很多内容我是参考了官方的文档来编写的。也有我的一些理解在里面如有不足之处请见谅。
knockout.js官方下载地址 http://knockoutjs.com/downloads/index.html
转载于:https://www.cnblogs.com/Orthetrummelania/p/3973252.html
knockout.js简单实用教程1相关推荐
- Mockito简单实用教程 - 第一部分mock
Mockito简单实用教程 - 第一部分mock 环境介绍 依赖 内容 1. 检验方法是否有被调用 2. 指定mock方法的返回值 3. 验证指定次数 4. 验证异常 5. 校验执行顺序 6. 校验形 ...
- 【ffmpeg】最全简单实用教程|安装音频视频剪切融合拼接抽帧等
ffmpeg 实用教程(非常全) FFmpeg Download(Mac) brew ffmpeg 常用操作(最全最简单) 音频 音频转换格式 多个音频混音 改变音量大小 音频淡入淡出 调整音频速率 ...
- 网站制作---科讯万能搜索系统的简单实用教程
很多科汛fans已对系统自带的的简单搜索感谢不满足了,比如做人才网的用户希望能根据职位类型,工作地点,关键字等进行精确搜索,这时如果用KesionCMS自带搜索标签显然不符合要求.很幸运KesionC ...
- 【超简单实用教程】mkv、flv格式转mp4格式(附网盘资源)
原写在自己的B站专栏,为了方便,把那篇删了,只放在CSDN里了. 之前看到有人推荐过类似的技术入门帖,想到了自己当初也是从什么都不明白一点点摸索的.不过这篇文章只提了mkv的格式转换,我想顺着这个思路 ...
- 华硕电脑怎么录屏?华硕电脑录屏功能在哪?简单实用教程来了
有很多小伙伴对如何录制华硕电脑的屏幕知识和信息知之甚少.现在大家都想多了解一些关于华硕电脑怎么录屏的相关知识和信息.所以今天小编收集了一些关于如何录制华硕电脑屏幕的知识和信息,与大家分享. 华硕电脑 ...
- three.js简单实用
threejs 3D 实现商品切换动效 话不多说,先看展示效果 在开始编写代码之前,我这边先阐述几个概念,以方便大家更好的理解 概念讲解 场景(Sence) 一切要素都在场景里面,所有绘制的元素都要添 ...
- auto.js 简单入门教程
安装auto.js 手机安装auto.js后,需要打开无障碍模式(为了脚本能执行)和悬浮框(为了查看控件信息) Visual Studio Code 在VS Code中菜单"查看" ...
- 安装Windows、Ubuntu双系统超简单实用教程
目录 一.版本选择 二.安装步骤 1.查看电脑配置 2.制作系统盘 3.在windows下创建空白分区 4.安装系统 Hey, guys!相信很多小伙伴在安装Windows.Ubuntu双系统过程中遇 ...
- 库卡kuka仿真软件sim Pro 3.1简单实用教程
实验目的 建立机器人,自定义抓手,导入外部模型,掌握工具坐标.基坐标的使用,自动生成轨迹. 实验步骤 打开KUKA.Sim Pro 3.1.2仿真软件,依次点击KUKA Sim Library 3.1 ...
最新文章
- 加密模式||填充模式
- mysql特殊编码_Mysql 字符编码
- 生成自签名ssl证书
- mycat mysql 物理部署_一、MyCat的搭建
- VIM自动格式化C代码
- Android串口通信apk源码
- 论文浅尝 - ICLR2021 | BERTology 遇上生物学:在蛋白质语言模型中解释注意力
- 苹果充电配件MagSafe Duo Charger现已发售
- Algorithm Gossip (21) 最大访客数
- .NET与COM互操作系列
- php删除数组中相同的元素,只保留一个相同元素
- 50. Element removeChild() 方法
- fit me app Android,「最美应用」国庆专题:—这些习惯养成 App,让你离更好的自己更进一步!...
- android stagefright框架
- mo管理器python_GitHub - mowujilun/pyecharts: Python Echarts Plotting Library
- persevere的用法_努力奋斗的英文短语 努力的英文意思是
- python可以做数据库功能吗_python可以用哪些数据库
- 5G业务测试方法与验证
- python中怎么创建配置文件,python怎么读取配置文件
- 鸭子精进城 856