认识Knockout及如何使用Knockout绑定上下文

Knockout介绍

Knockout简称ko，是一个轻量级的javascript类库，采用MVVM设计模式（即Model、view、viewModel），简单优雅的实现了双向绑定，实时更新，帮助您使用干净的数据模型来创建丰富的、响应式的用户界面。

Knockout有三大核心特性：

1.优雅的依赖跟踪（Elegant dependency tracking）：任何时候数据模型的变化都会自动更新相应的UI部分；

2.声明式绑定（Declarative bindings） ： 简单的将UI和你的数据模型关联起来，你就可以创建复杂的动态UI；

3.高度可扩展性（Trivially extensible） ： 只需几行代码实现一个自定义的行为来作为声明式绑定；

其他优点：

1.纯净的javascript代码；

2.可以随时添加到你现有的web应用中；

3.轻量级，GZIP后只有13K；

4.能够工作于几乎所有主流浏览器（(IE 6+, Firefox 2+, Chrome, Safari, Edge, others）；

ko采用的是MVVM设计模式，即model view viewModel。

简单的例子

There are <span data-bind="text: myItems().length"></span> items

就是这么简单，你不必写代码来更新text内容，它会在数组长度改变时自动更新，与此类似，如果我们想利用数组长度控制按钮的可用性仅仅需要：

<button data-bind="enable: myItems().length < 5">Add</button>

下面接着给大家介绍使用Knockout绑定上下文

Binding context

binding context是一个保存数据的对象，你可以在你的绑定中引用它。当应用绑定的时候，knockout自动创建和管理binding context的继承关系。这种层次结构的根引用你指定的viewModel参数（ko.applyBindings(viewModel)）。

然后每次使用一个控制流如with或者foreach 来创建一个子节点binding context引用嵌套的viewModel data。

$parent

<h1 data-bind="text: name"></h1>
<div data-bind="with: manager">
 <!-- Now we're inside a nested binding context -->
 <span data-bind="text: name"></span> is the
 manager of <span data-bind="text: $parent.name"></span>
</div>

$parents

这是一个数组，代表了所有的父节点view models

$parent[0] : 代表父节点；

$parent[1] : 代表祖父节点；

$parent[1] : 代表曾祖父节点；

.....以此类推

$root

它是root context的根节点视图模型对象，一般是通过ko.applyBindings指定的，相当于$parents[$parents.length - 1]。

$component

如果你在一个特定的组件模板的上下文中，$component指定的是那个component，它的指定组件相当于$root，在嵌套的组件情况下，它代表了最邻近的一个组件。

$data

它代表了当前上下文中的viewModel对象，$data和$root是相当的。在嵌套的binding context中，这个参数将设置到当前的数据项。

$data是非常有用的，例如，当你想引用viewModel本身而不是viewModel的属性的时候。

<ul data-bind="foreach: ['cats', 'dogs', 'fish']">
 <li>The value is <span data-bind="text: $data"></span></li>
</ul>
$index(仅在foreach binding中可用)

它是一个在foreach绑定中的数组的从0开始的索引条目。不想其他的context属性，$index是observable的，即会随着数组item的更新而更新。

$parentContext

指定了父节点级别的binding context对象，与$parent不同的是，它是在父节点中指定数据而不是binding context。

$rowData

它是在当前上下文中，原viewModel的值，通常它相当于$data，但是，如果viewModel被ko以observable来修饰，$data是unobservable的，而$rowData是observable的。

赞 (0)

相关推荐

  • ko knockoutjs动态属性绑定技巧应用

    ko knockoutjs动态属性绑定技巧应用

    knockoutjs 简称 ko ko的动态属性是指,ViewModel不确定的属性,而后期却需要的属性. 什么是不确定属性,比如ListModel如果 编辑某一项,想把这一项的状态变更为Edit.数据并不包括Edit属性,mvvm绑定时,会发现报错. 那么一定需要拓展ko才能达到我们的目的. 首先来认识有值属性绑定,和 无值属性绑定: 一.有值属性绑定: JS模型: 复制代码 代码如下: $(function () { var viewModel = function () { var sel

  • Knockoutjs的环境搭建教程

    最近要在项目中使用Knockoutjs,因此今天就首先研究了一下Knockoutjs的环境搭建,并进行了一个简单的测试. 首先要到http://knockoutjs.com/index.html下载最新版本的Knockoutjs,笔者这里下载的是knockout-2.2.0.js.然后新建一个.html文件,在html文档中加入以下的语句导入此js: <script type="text/javascript" src="knockout-2.2.0.js"&

  • Knockout数组(observable)使用详解示例

    1.简单举例 复制代码 代码如下: <script type="text/javascript">    var myObservableArray = ko.observableArray();  ///初始化一个空的数组    myObservableArray.push("Some Value");          ///向数组中添加一个项</script> 2.关键点:监控数组跟踪的是数组里的对象,而不是这些对象自身的状态.简单说,

  • Knockout自定义绑定创建方法

    概述 除了上一篇列出的KO内置的绑定类型(如value.text等),你也可以创建自定义绑定. 注册你的binding handler ko.bindingHandlers.yourBindingName = { init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { // This will be called when the binding is first applied to an

  • Knockout visible绑定使用方法

    简单的绑定 首先还是先定义一个ViewModel 复制代码 代码如下: var AppViewModel = {        shouldShowMessage: ko.observable(true)  ///初始化的时候div是visible的         }; AppViewModel.shouldShowMessage = ko.observable(false);   ///现在hidden勒    ko.applyBindings( AppViewModel); 并且通过ko.

  • Knockout text绑定DOM的使用方法

    简单绑定 复制代码 代码如下: Today's message is: <span data-bind="text: myMessage"></span> <script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>   <script type="text/javascript&qu

  • Knockoutjs快速入门(经典)

    Knockoutjs快速入门(经典)

    Knockoutjs是一个JavaScript实现的MVVM框架.主要有如下几个功能: 1. Declarative bindings 2. Observables and dependency tracking 3. Templating 它对于分离前台的业务逻辑和视图简化数据绑定过程有显著的作用.闲言少叙,直接看例子,如何下载也不说了,如果用VS开发的话用Nuget就可以一键搞定. 1.基本绑定和依赖跟踪 首先需要定义一个ViewModel: 复制代码 代码如下: <script type=

  • 用Javascript评估用户输入密码的强度（Knockout版）

    我们来看看如果使用Knockout更简单的来实现密码强度的验证. 原有代码请查看: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • 认识Knockout及如何使用Knockout绑定上下文

    Knockout介绍 Knockout简称ko,是一个轻量级的javascript类库,采用MVVM设计模式(即Model.view.viewModel),简单优雅的实现了双向绑定,实时更新,帮助您使用干净的数据模型来创建丰富的.响应式的用户界面. Knockout有三大核心特性: 1.优雅的依赖跟踪(Elegant dependency tracking):任何时候数据模型的变化都会自动更新相应的UI部分: 2.声明式绑定(Declarative bindings) : 简单的将UI和你的数据

  • KnockoutJS 3.X API 第四章之事件event绑定

    目的 event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数.例如keypress,mouseover或者mouseout等 例如: Mouse over me 源码: <div> <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }"> Mouse over me </div> <div data-bind="visibl

  • KnockoutJS 3.X API 第四章之click绑定

    目的 click绑定主要作用是用于DOM元素被点击时调用相关JS函数.最常见用于button.input.a元素. 例如: You've clicked 0timesClick me 源码: <div> You've clicked <span data-bind="text: numberOfClicks"></span> times <button data-bind="click: incrementClickCounter&q

  • 12种JavaScript常用的MVC框架比较分析

    本文详细讲述了12种JavaScript常用的MVC框架.分享给大家供大家参考,具体如下: Gordon L. Hempton是西雅图的一位黑客和设计师,他花费了几个月的时间研究和比较了12种流行的JavaScript MVC框架,并在博客中总结了每种框架的优缺点,最终的结果是,Ember.js胜出. 此次比较针对的特性标准有四种,分别是: ① UI绑定(UI Bindings) ② 复合视图(Composed Views) ③ Web表现层(Web Presentation Layer) ④

  • 浅谈使用MVC模式进行JavaScript程序开发

    随着前台开发日益受到重视,客户端代码比重日益增加的今天,如何在javascript开发里应用MVC模式,这个问题似乎会一直被提到,所以偶在这里粗略的谈一下自己的看法吧. MVC模式的基本理念,是通过把一个application封装成model, view和controller三个部分达到降低耦合,简化开发的目的.这么说很空洞,大家可以实际看个例子: <select id="selAnimal"> <option value="cat">cat

  • BootstrapTable+KnockoutJS相结合实现增删改查解决方案（三）两个Viewmodel搞定增删改查

    BootstrapTable+KnockoutJS相结合实现增删改查解决方案（三）两个Viewmodel搞定增删改查

    前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打算正式将ko用起来,于是乎对ko和bootstraptable做了一些封装,在此分享出来供园友们参考.封装思路参考博客园大神萧秦,如果园友们有更好的方法,欢迎讨论. KnockoutJS系列文章: BootstrapTable与KnockoutJS相结合实现增删改查功能[一] BootstrapTa

  • 详解Angular 4.x NgTemplateOutlet

    该指令用于基于已有的 TemplateRef 对象,插入对应的内嵌视图.在应用 NgTemplateOutlet 指令时,我们可以通过 [ngTemplateOutletContext] 属性来设置 EmbeddedViewRef 的上下文对象.绑定的上下文应该是一个对象,此外可通过 let 语法来声明绑定上下文对象属性名. 友情提示:若 let 语法未绑定任何属性名,则上下文对象中 $implicit 属性,对应的值将作为默认值. NgTemplateOutlet 指令语法 复制代码 代码如下

  • Angular 4 指令快速入门教程

    Angular 4 指令快速入门教程

    本系列教程的开发环境及开发语言: Angular 4 + Angular CLI TypeScript 基础知识 Angular CLI 基本使用 安装 Angular CLI (可选) npm install -g @angular/cli 创建新的项目 ng new PROJECT-NAME 启动本地服务器 cd PROJECT-NAME ng serve Angular 指令简介 Angular 的指令分为三种: 组件(Component directive):用于构建UI组件,继承于

  • 详解Angular 自定义结构指令

    1. <ng-template>元素 import { Component, TemplateRef, ViewContainerRef, ViewChild, AfterViewInit } from '@angular/core'; @Component({ selector: 'app-code404', template: ` <!-- 这里使用一个模板变量,在组件中使用@ViewChild装饰器获取模板元素--> <ng-template #tpl> Big

随机推荐