Knockout是一款很优秀的JavaScript库，通过应用MVVM模式使JavaScript前端UI简单化。任何时候你的局部UI内容需要自动更新，KO都可以很简单的帮你实现，并且非常易于维护。

　　Knockout的3个核心功能是：

　　♦ 属性监控与依赖跟踪

　　♦ 声明式绑定

　　♦ 模板机制

　　

　　MVVM

　　Model-View-View Model (MVVM)是一种创建用户界面的设计模式。

　　♦ Model：用于存储应用程序数据，表示业务领域的对象和数据操作，并且独立于任何界面。 当使用KO的时候，通常是使用Ajax向服务器请求数据来读写这个数据模型。

　　♦ View Model：纯粹用于描述数据内容和页面操作的数据模型。例如，如果你想实现一个列表编辑器，你的ViewModel（数据模型）就是项目清单对象和你所暴露出来的添加和删除列表项的方法。它并不是UI本身，不具有任何按钮和显示样式的概念。它不是持久化的数据模型，仅是用户当前使用的未保存的数据。当使用KO时，View Model（数据模型）是纯粹的不包含HTML知识的JavaScript对象，保持View Model（数据模型）抽象在使用时可以保持简单，因此可以更简单的操作管理更复杂的行为。

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

　　创建绑定

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

　　使用KO创建一个View Model，仅仅只需要声明一个JavaScript对象，例如：

var myViewModel = {personName:'Bob',personAge:123};

　　创建一个简单的视图声明式绑定到这个View Model上，例如，下面的代码显示personName的值：

The name is <span data-bind="text:personName"></span>

　　data-bind属性并不是HTML固有对象，但使用它是完全正确的（这是完全遵守HTML5，尽管有验证器指出这是一个无法验证的属性，但在HTML4当中使用是不会造成任何问题的）。但浏览器并不知道它是什么意思，所以你需要激活Knockout来使其生效。

　　激活Knockout，只需要将下面的代码加到<script>标签中就可以了:

ko.applyBindings(myViewModel);

　　为了确保在网页元素都载入后才执行ko.applyBindings()，可以将代码方法放到文档底部。如果引用了jQuery，可以放在jQuery的$.ready()函数中。

　　以上操作完成后，你的View（页面）显示的内容等同于编写以下HTML代码：

The name is <span>Bob</span>

　　ko.applyBindings(viewModelOrBindingContext, rootNode)的参数如下：

　　♦ viewModelOrBindingContext：激活KO时用于声明式绑定的View Model对象；

　　♦ rootNode（可选）：设置要使用data-bind属性的HTML元素或容器。例如：

ko.applyBindings(myViewModel, document.getElementById('someElementId'))

　　它限制了只有ID为someElementId的元素才能激活使用KO功能，当你在一个页面中声明了多个View Model来绑定不同的界面区域时，这样限制是很有好处的。

　　自动检测：Observable

　　上面讲了如何创建一个基本的数据模型以及如何利用绑定来显示它的属性。但KO最重要的一个属性是当View Model发生变化时能够自动的更新UI界面。只需要view model属性声明成observable的，因为它是非常特殊的JavaScript对象，能够通知用户它的改变以及自动检测依赖关系。

var myViewModel = {

    personName:ko.observable('Bob'),

    personAge:ko.observable(123)

};

　　不需要对View进行更改，所有的data-bind语法依然正常工作。所不同的是，现在它能够自动检测变化，并通知它自动更新界面（View）。

　　监控属性(observables)的读和写：

　　读：myViewModel.personName();  //不用参数就是读操作

　　写：myViewModel.personName("Mary");  //添加参数就是赋新值

　　多个属性赋值时，可以用链式语法：myViewModel.personName("Mary").personAge(50);

　　当调用写操作时，text绑定会自动更新新值到其对应的DOM对象元素上，这就是改变数据模型能够自动刷新View页面的原因。

　　Demo展示

<!DOCTYPE html>

<html>

    <head>

        <script type='text/javascript' src='scripts/knockout-3.4.2.debug.js'></script>

    </head>

    <body>

        <table>

            <tr>

                <td>你叫啥：</td>

                <td><input type="text"data-bind="value: personName" /></td>

            </tr>

            <tr>

                <td>我也叫啥：</td>

                <td><span data-bind="text: personName"></span></td>

            </tr>

        </table>

    </body>

    <script>

        var myViewModel = {

            personName:ko.observable('Bob'),

            personAge:ko.observable(123)

        };

        ko.applyBindings(myViewModel);

    </script>

</html>

Knockout.js(一)：简介的更多相关文章

  1. knockout.js的简介和简单使用

    1.knockout简介knockout是一个轻量级的UI类库,通过MVVM模式使JavaScript前端UI简单化knockout有四大重要概念:1)声明式绑定:使用简明移读的语法很容易地将模型(m ...

  2. 1.Knockout.Js（简介）

    前言 最近一段时间在网上经常看到关于Knockout.js文章,于是自己就到官网看了下,不过是英文的,自己果断搞不来,借用google翻译了一下.然后刚刚发现在建立asp.net mvc4.0的应用程 ...

  3. Knockout.Js学习目录

    1.Knockout.Js(简介) 2.Knockout.Js(监控属性Observables) 3.Knockout.Js(属性绑定) 4.Knockout.Js(事件绑定) 5.Knockout. ...

  4. Knockout.Js官网学习（简介）

    前言 最近一段时间在网上经常看到关于Knockout.js文章,于是自己就到官网看了下,不过是英文的,自己果断搞不来,借用google翻译了一下.然后刚刚发现在建立asp.net mvc4.0的应用程 ...

  5. C#设计模式总结 C#设计模式(22)——访问者模式（Vistor Pattern） C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】：利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

  6. 【Knockout.js 学习体验之旅】（1）ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  7. MVVM大比拼之knockout.js源码精析

    简介 本文主要对源码和内部机制做较深如的分析,基础部分请参阅官网文档. knockout.js (以下简称 ko )是最早将 MVVM 引入到前端的重要功臣之一.目前版本已更新到 3 .相比同类主要有 ...

  8. Knockout.Js官网学习(系列)

    1.Knockout.Js官网学习(简介) 2.Knockout.Js官网学习(监控属性Observables) Knockout.Js官网学习(数组observable) 3.Knockout.Js ...

  9. 【Knockout.js 学习体验之旅】（3）模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  10. 【Knockout.js 学习体验之旅】（2）花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

随机推荐

  1. 【BZOJ4104】解密运算 [暴力]

    解密运算 Time Limit: 10 Sec  Memory Limit: 512 MB[Submit][Status][Discuss] Description 对于一个长度为N的字符串,我们在字 ...

  2. Sketch VS Photoshop

    参考:http://mp.weixin.qq.com/s?__biz=MjM5NTQ5MjIyMA==&mid=217309554&idx=4&sn=4d6a5239ca813 ...

  3. elk + suricata 实验环境详细安装教程

    1.安装运行suricata,需要*** sudo add-apt-repository ppa:oisf/suricata-stable sudo apt-get update sudo apt-g ...

  4. 【LabVIEW技巧】你可以不懂OOP，却不能不懂封装

    前言 大多数写LabVIEW程序的工程师都不是一个纯软的工程师,很多做硬件的.做机械的.甚至学化学的也会学习LabVIEW. 由于主要重心不在软件,所以LabVIEW程序基本上能用行,也就得到入门容易 ...

  5. js上传文件（图片）限制格式及大小为3M

    本文保存为.html文件用浏览器打开即可测试功能   <form id="form1" name="form1" method="post&qu ...

  6. leetcode 之Gas Station（11）

    这题的思路很巧妙,用两个变量,一个变量衡量当前指针是否有效,一个衡量整个数组是否有解,需要好好体会. int gasStation(vector<int> &gas, vector ...

  7. Leetcode 之Anagrams（35）

    回文构词法,将字母顺序打乱.可将字母重新排序,若它们相等,则属于同一组anagrams. 可通过hashmap来做,将排序后的字母作为key.注意后面取hashmap值时的做法. vector< ...

  8. 21：序列化django对象

    django的序列化框架提供了一个把django对象转换成其他格式的机制,通常这些其他的格式都是基于文本的并且用于通过一个管道发送django对象,但一个序列器是可能处理任何一个格式的(基于文本或者不 ...

  9. 19：django 分页

    分页是网站中比较常见的应用,django提供了一些类帮助管理分页的数据,这些类都位于django.core.paginator.py文件里面 分页类 构造函数 class Paginator(obje ...

  10. jstack 命令学习笔记

    大部分内容转载自:Java命令学习系列(二)--Jstack jstack - 查看堆栈信息 jstack ( Stack Trace for java ) 命令主要作用就是为了查看堆栈信息.它可以用 ...