Knockout.js简介

  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>

  

时间: 09-18

Knockout.js简介的相关文章

通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用

REFERENCE FROM : http://www.cnblogs.com/artech/archive/2012/07/04/Knockout-web-api.html 较之面向最终消费者的网站,企业级Web应用对用户体验的要求要低一些.不过客户对“用户体验”的要求是“与日俱增”的,很多被“惯坏了”的用户已经不能忍受Postback带来的页面刷新,所以Ajax在企业级Web应用中得到了广泛的应用.企业级Web应用的一个特点是以“数据处理”为主,所以“面向绑定”的Knockout.js 是一

jquery.flot.js简介

JQuery图表插件之Flot Flot是一个Jquery下图表插件,具有简单使用,交互效果,具有吸引力外观特点.目前支持 Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+ 等浏览器,是一个基于Javascript和Jquery纯客端户的脚本库,下面看一个简单的示例,先插入js: <script language="javascript" type="text/javascript&qu

jquery.easypiechart.js简介

此插件主要是用来统计新的访问.跳出率.服务器负载.使用的RAM等,功能很强大,带有HTML5的动画效果,效果非常炫,看效果吧easyPieChart一款新型的EASY饼图数据统计Jquery插件截图: 插件下载:https://github.com/rendro/easy-pie-chart/ jquery.easypiechart.js简介,布布扣,bubuko.com

jquery.sparkline.js简介

jQuery线状图插件Sparkline 官网地址:http://omnipotent.net/jquery.sparkline/ 文档地址:http://omnipotent.net/jquery.sparkline/#docs 下载地址:http://omnipotent.net/jquery.sparkline/#download jquery.sparkline.js简介,布布扣,bubuko.com

Vue.js简介

Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然是Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJs,下面我会将Vue与Angular(Angular 1.0+版本)做一些简单的比较. Vue的主要特点就和它官网(http://cn.vuejs.org/)所介绍的那样: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化 简单 下面看一段Angular的实

01 Node.js简介, 安装&amp;配置

Node.js 简介 Node.js 是什么 Node.js 有着强大而灵活的包管理器(node package manager,npm) 目前, 已经有强大第三方工具模块, 例如数据库连接, 网站开发框架, CSS生成器, 操作系统API, 网络通信 等. Node.js 是什么 ? 是一个让 javascript 运行在服务器端的平台, 以前javascript只能运行在浏览器中,  node.js 可以解析 javascript. CommonJS 试图设计一套Javascript的规范.

一个简单的 ASP.NET MVC 例子演示如何在 Knockout JS 的配合下,使用 TypeScript 。

前言 TypeScript 是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构师,已工作于TypeScript的开发.TypeScript扩展了 JavaScript 的句法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作.TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性.TypeScript

Analytics.js简介

analytics.js JavaScript代码段是一种可用于衡量用户与您网站的互动情况的全新方式.它与之前的跟踪代码ga.js类似,但为开发者自定义实现方案提供了更大的灵活性. analytics.js代码段是Universal Analytics(目前处于公测阶段)的一部分.新用户应使用analytics.js.现有的ga.js用户应为analytics.js创建新的网络媒体资源并在他们的网站中进行两次代码实现.在同一页面上添加ga.js和analytics.js代码段并不会有任何安全问题

jquery.gritter.js简介

Gritter 是一个小型的 jQuery 消息通知插件,通知效果如下图所示: 参考网 jquery.gritter.js简介,布布扣,bubuko.com