关于学习Knockoutjs--入门(二)

  这两天终于闲一丢丢了,可以有多点时间学习一下拉。接下来要写到的还是Knockoutjs。

  Knockout是建立在以下3个核心功能之上的:

  1、 属性监控与依赖跟踪

  2、 声明式绑定

  3、 模版机制

  Model-View-View Model (MVVM)是一种创建用户界面的设计模式。通过它只要将UI界面分成以下3个部分,就可以使复杂的界面变得简单(这个上一篇画过图,现在细讲一下):

  1、Model,用于存储应用程序数据,这些数据表示业务领域的对象和数据操作,并且独立于任何界面。

  2、View Model,纯粹用于描述数据内容和页面操作的数据模型。

  注意:这不是UI本身,它不具有任何按钮和显示样式的概念。这不是持久化的数据模型—它仅是用户当前使用的未保存的数据。当使用KO时,View Model(数据模型)是纯粹的不包含HTML知识的JavaScript对象,保持View Model(数据模型)抽象在使用时可以保持简单,因此可以更简单的操作管理更复杂的行为。

  3、View,代表View Model状态的一个可见、互动的UI界面。它主要用于显示View Model的数据信息、发送用户命令(例如,当用户点击按钮)以及在View Model发生变化时保持自动更新。

  使用KO时,View层主要就是简单的将HTML文档声明式的绑定到View Model,将它们关联起来。另外,也可以利用模版从View Model获取数据动态生成HTML。

   总结ko几种类型绑定:

  html绑定

  html绑定到DOM元素上,使得该元素显示的HTML值为绑定的参数。

  Visible绑定

  Visible绑定通过绑定一个值来确定DOM元素显示或隐藏

  text绑定

  Visible绑定通过绑定一个值来确定DOM元素显示或隐藏

  css类名绑定

  css绑定是添加或删除一个或多个CSS class到DOM元素上。 非常有用,比如当数字变成负数时高亮显示。

  style属性绑定

  style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar。

  attr属性绑定

  这个绑定可以用于给DOM元素添加自定义属性,或绑定到已有的属性,attr 绑定提供了一种方式可以设置DOM元素的任何属性值。可以设置img的src属性,连接的href属性。使用绑定,当模型属性改变的时候,它会自动更新。

   foreath绑定

  使用此功能可以方便循环遍历输出某个数组、集合中的内容。

  if绑定

  (1)使用if binding可以控制某个组件动态显示,类似我们之前接触到的visible属性,不过此属性绑定过以后就不能更改,而if binding可以根据相应的条件控制组件是否显示

  (2)、也可以使用if来判断某个元素是否为null,如果为null则不会显示

  with绑定

  可以使用with binding来重新定义一个上下文绑定

  click绑定

  lick绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button,input和连接a上,但是可以在任意元素上使用。

  event属性绑定

  event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数。大部分情况下是用在keypress,mouseover和mouseout上。

  value属性绑定 

  value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件<input>,<select>和<textarea>上。

  当用户编辑表单控件的时候, view model对应的属性值会自动更新。同样,当更新view model属性的时候,相对应的元素值在页面上也会自动更新。

  注:如果在checkbox或者radio button上使用checked绑定来读取或者写入元素的 checked状态,而不是value 值的绑定。

  submit属性绑定

  submit绑定在form表单上添加指定的事件句柄以便该form被提交的时候执行定义的JavaScript 函数。只能用在表单form元素上。

  当你使用submit绑定的时候, Knockout会阻止form表单默认的submit动作。换句话说,浏览器会执行你定义的绑定函数而不会提交这个form表单到服务器上。可以很好地解释这个,使用submit绑定就是为了处理view model的自定义函

  数的,而不是再使用普通的HTML form表单。如果你要继续执行默认的HTML form表单操作,你可以在你的submit句柄里返回true。

  好了学习的今天先写到这里,这段时间呢,事情特别多,脑子老是记不住,后来我发现了一个解决的办法,就是要做的东西,都整理起来,记好,然后清空大脑,再按照整理出来的一样一样做,效率也提高了,不过有的时候拖延症总犯,这个得

赶紧克服!

时间: 2024-10-22 01:44:15

关于学习Knockoutjs--入门(二)的相关文章

现代C++学习笔记之二入门篇2,数据转换

static_cast:    这种强制转换只会在编译时检查. 如果编译器检测到您尝试强制转换完全不兼容的类型,则static_cast会返回错误. 您还可以使用它在基类指针和派生类指针之间强制转换,但是,编译器在无法分辨此类转换在运行时是否是安全的. dynamic_cast: dynamic_cast在运行时检查基类指针和派生类指针之间的强制转换. dynamic_cast 是比 static_cast 更安全的强制类型转换,但运行时检查会带来一些开销. const_cast:    con

现代C++学习笔记之二入门篇1

现代 C++ 强调: 基于堆栈的范围,而非堆或静态全局范围. 自动类型推理,而非显式类型名称. 智能指针而不是原始指针. std::string 和 std::wstring 类型(请参见 <string>),而非原始 char[] 数组. 标准模板库 (STL) 容器(例如 vector.list 和 map),而非原始数组或自定义容器. 请参见 <vector>.<list> 和 <map>. STL 算法,而非手动编码的算法. 异常,可报告和处理错误条

storm学习之入门篇(二)

Strom的简单实现 Spout的实现 对文件的改变进行分开的监听,并监视目录下有无新日志文件添加. 在数据得到了字段的说明后,将其转换成tuple. 声明Spout和Bolt之间的分组,并决定tuple发送给Bolt的途径. Spout中open.nextTuple和delcareOutputFields方法的逻辑: declareOutputFileds()决定了tuple发射的格式,这样的话Bolt就可以用类似的方法将tuple译码.Spout持续对日志文件的数据的变更进行监听,一旦有添加

汇编入门学习笔记 (二)—— 寄存器(内存访问)、栈

疯狂的暑假学习之  汇编入门学习笔记 (二) 参考:<汇编语言> 王爽  第三章 一.寄存器(内存访问) 1.DS和[address] DS 数据段寄存器,用来存放数据段地址 [address] 用来表示数据段的偏移地址 同样跟CS一样,不可以通过 mov ds, 1000 给ds赋值 要通过通用寄存器ax等. 例如: mov ax, 1000 mov ds, ax mov al, [0] 把1000:0的内容存进al mov bx, 1000 mov ds, bx mov [0], al 把

Java超简明入门学习笔记(二)

Java编程思想第4版学习笔记(二) 第三章 操作符 & 第四章 控制执行流程(流程控制语句)   第三章和第四章的内容主要是讲操作符和流程控制语句,Java的大多数操作符和流程控制语句都和C/C++的十分类似,因此把这两章内容汇成一章,挑出Java独特的地方进行学习.         第三章   知识点1:P39,3.2,操作符,优先级 Java操作符和其他语言一样,作用于操作数,产生新值.各个操作符的优先级和结合性类似C/C++. 这里有一些特殊的地方: + 操作符可以用于字符串,把字符串和

转 Python爬虫入门二之爬虫基础了解

静觅 » Python爬虫入门二之爬虫基础了解 2.浏览网页的过程 在用户浏览网页的过程中,我们可能会看到许多好看的图片,比如 http://image.baidu.com/ ,我们会看到几张的图片以及百度搜索框,这个过程其实就是用户输入网址之后,经过DNS服务器,找到服务器主机,向服务器发出一个请求,服务器经过解析之后,发送给用户的浏览器 HTML.JS.CSS 等文件,浏览器解析出来,用户便可以看到形形色色的图片了. 因此,用户看到的网页实质是由 HTML 代码构成的,爬虫爬来的便是这些内容

MongooooooooooooooooooooDB入门二:基本概念介绍

前言 工欲善其事必先利其器.在学习MongoDB之前,需要对MongoDB的一些基本概念有系统的了解. 所以,本篇文章主要介绍MongoDB的一些基本概念,这些概念的定义均来自<MongoDB权威指南>,关于此书想要了解更多,请点击此处. 我尽量使用最简洁的语言来尽可能完整地描述这些基本概念,如有遗漏或不妥之处欢迎指正. 文档 文档是MongoDB的核心概念之一.多个键值对有序地放在一起便是文档.例如: {"name":"Jerry","sco

DOS命令学习(从入门到精通)

DOS命令学习 一.DOS使用常识 DOS(Disk Operating System)是一个使用得十分广泛的磁盘操作系统. 常见的DOS有两种:IBM公司的PC-DOS和微软公司的MS-DOS,它们的功能.命令用途格式都相同,我们常用的是MS-DOS. DOS的概况 DOS(Disk Operating System)是一个使用得十分广泛的磁盘操作系统,就连眼下流行的Windows9x/ME系统都是以它为基础. 常见的DOS有两种:IBM公司的PC-DOS和微软公司的MS-DOS,它们的功能.

[转载]MongoDB开发学习 经典入门

如果你从来没有接触MongoDB或对MongoDB有一点了解,如果你是C#开发人员,那么你不妨花几分钟看看本文.本文将一步一步带您轻松入门. 阅读目录 一:简介 二:特点 三:下载安装和开启服务器 四:使用mongo.exe 执行数据库增删改查操作 五:更多命令 六:MongoDB语法与现有关系型数据库SQL语法比较 七:可视化的客户端管理工具MongoVUE 八:在C#中使用官方驱动操作MongoDB 九,在C#中使用samus驱动操作MongoDB 十:写个批处理,方便开启Mongodb服务

Python入门(二)——IDE选择PyCharm,输入和输出,基础规范,数据类型和变量,常量,字符串和编码,格式化

Python入门(二)--IDE选择PyCharm,输入和输出,基础规范,数据类型和变量,常量,字符串和编码,格式化 我们从今天就开始正式的学习PY交易了,PY交易还行,我们有基础之后学习起来倒不是说那么的被动,我学习的是Python2.7,虽然现在随着版本的迁移至Python3,但是这个并不会对我们造成什么困扰,毕竟只是一个适应阶段 我们的学习资料:廖雪峰官方网站Python2.7教程 一.IDE选择PyCharm 我们虽然在前面一章已经配置过,但是我们还是有很多的IDE可以开发Py,比如su