绑定语法大致分为2种:

1. 数据绑定(data-bind syntax)

2. 绑定上下文(Binding Context)

下面针对这2中绑定语法分别介绍一下

1. 绑定上下文(Binding Context)

一个绑定语法由两部分组成:绑定的名字和值,他们之间使用“:”进行隔开。

Today's message is: <span data-bind="text: myMessage"></span>

一个标签中我们可以使用多个绑定(多个绑定之间可以相关也可以不相关),此时这些绑定之间使用","进行隔开,比如:

<!-- related bindings: valueUpdate is a parameter for value -->
Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" /> <!-- unrelated bindings -->
Cellphone: <input data-bind="value: cellphoneNumber, enable: hasCellphone" />

绑定语法中的值可以是单个值,也可以是一个变量,也可以是一段文字,同时也可以是一段JavaScript代码,下面的这个例子展现的就是绑定语法中值得多样性:

<!-- variable (usually a property of the current view model -->
<div data-bind="visible: shouldShowMessage">...</div> <!-- comparison and conditional -->
The item is <span data-bind="text: price() > 50 ? 'expensive' : 'cheap'"></span>. <!-- function call and comparison -->
<button data-bind="enable: parseAreaCode(cellphoneNumber()) != '555'">...</button> <!-- function expression -->
<div data-bind="click: function (data) { myFunction('param1', data) }">...</div> <!-- object literal (with unquoted and quoted property names) -->
<div data-bind="with: {emotion: 'happy', 'facial-expression': 'smile'}">...</div>

如果我们在一个标签中绑定多个元素时,这些元素之间会互相影响的,此时我们在使用的时候要注意以下两点:

(1)、绑定执行的顺序是从左向右的。

(2)、当Model层的数据改变是,绑定到同一个标签上的值都会改变。

2. 绑定上下文(Binding Context)

一个Binding Context是一个对象,在他们中保存着数据,这些数据我们又可以在我们的绑定语法中去使用。当我们使用属性绑定时,Knockoutjs会自动的创建和管理具有等级之分的Binding Context。当我们使用ko.applyBindings(viewModel)的时候,Knockoutjs就会创建root等级指向viewModel的参数。接着,如果你使用了with或者foreach时,Knockoutjs就会创建child binding context指向嵌套的View Model Data。Binding Context为我们提供了以下的属性可供我们在绑定语法中任意使用。

(1)、$parent

这个视图模型对象代表了他的父上下文,代表当前上下文的外部。在root context中,此属性还没有进行定义。例如:

<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>

(2)、$parents

此属性代表了所有的parent属性。

$parents[0]:代表的是上一个View Model,和$parent相同

$parents[1]:代表的是上上一个View Model

$parents[2]:代表的是上上上一个View Model

这样依次往下推就行了。

(3)、$root

这个是最重要的view model object在root context中,是最上层的parent content,我们也可以使用$parents[$parents.length-1]替换。

(4)、$data

代表当前的view model,如果此时在根部的话,则$data和$root是相等的。如果你不想引用一个view model的属性而想引用一个view model本身时,

$data则是非常有用的:

<ul data-bind="foreach: ['cats', 'dogs', 'fish']">
<li>The value is <span data-bind="text: $data"></span></li>
</ul>

(5)、$index

此属性只在foreach标签中有用,他的值是从0开始的。

(6)、$parentContext

此标签和$parent是有区别的,$parent代表的是上层的view model,$parentContext代表的是上层的具体的数据,比如引用上层的index,使用$parentContext.$index。

下面的两个标签在属性绑定时也是可以使用的,但他们并不是binding context中的一员。

(1)、$context:指向当前的binding context object

(2)、$element

这是当前属性绑定的DOM对象,如果我们想要引用当前标签的属性值的时候我们则可以使用此属性。

<div id="item1" data-bind="text: $element.id"></div>

KnockoutJS(3)-绑定语法的更多相关文章

  1. KnockJs 绑定语法

    按照汤姆大叔的教程,学习了KnockJs相关知识,练习一下KnockoutJs的绑定语法. 相关的教程大家可以去看 汤姆大叔的博客. 练习代码下载 由于没有环境,代码直接用记事本写的,可能比较乱,仅作 ...

  2. KnockoutJS 3.X API 第四章(14) 绑定语法细节

    data-bind绑定语法 Knockout的声明性绑定系统提供了一种简洁而强大的方法来将数据链接到UI. 绑定到简单的数据属性或使用单个绑定通常是容易和明显的. 对于更复杂的绑定,它有助于更好地了解 ...

  3. Knockout应用开发指南 第三章:绑定语法(3)

    原文:Knockout应用开发指南 第三章:绑定语法(3) 12   value 绑定 目的 value绑定是关联DOM元素的值到view model的属性上.主要是用在表单控件<input&g ...

  4. Knockout应用开发指南 第三章:绑定语法(2)

    原文:Knockout应用开发指南 第三章:绑定语法(2) 7   click 绑定 目的 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用 ...

  5. Knockout应用开发指南 第三章:绑定语法(1)

    原文:Knockout应用开发指南 第三章:绑定语法(1) 第三章所有代码都需要启用KO的ko.applyBindings(viewModel);功能,才能使代码生效,为了节约篇幅,所有例子均省略了此 ...

  6. KnockoutJS 3.X API 第五章 高级应用(5) 使用预处理扩展Knockout绑定语法

    注意:这是一种高级技术,通常仅在创建可重用绑定或扩展语法的库时使用. 这不是你通常需要做的时候使用Knockout构建应用程序. 从Knockout 3.0开始,开发人员可以通过提供在绑定过程中重写D ...

  7. knockoutjs -- if 绑定

    参考:http://knockoutjs.com/documentation/if-binding.html If 绑定用来控制一部分html标签是否生成在DOM树中(html标签有data-bind ...

  8. knockoutjs with绑定导致unobtrusive validation失效的问题

    如果最初的时候with绑定的对象是空的,那么with绑定内部的unobtrusive validation规则在提交的时候无法生效,无法进行验证. 解决办法: 在提交的时候(或者with绑定的对象非空 ...

  9. 【Vue.js】vue基础: 3种Class和Style绑定语法

    凡是用到了v-bind,那就一定有变量的存在,下面是三种语法的展示: 1. 对象语法: v-bind:class="{active: isActive, 'text-danger': has ...

随机推荐

  1. 关于MIUI悬浮窗权限问题的解决方案

    先扯会....好久没写Blog了....这段时间有点小忙...瞎忙.....忙的自己都感觉都不应该.....严重影响了生活质量......生活的幸福指数!!!.....到现在还特么的单身!!!求介绍啊 ...

  2. Neo4查询语言Cypher3.0.7在antlr4下的文法(原创分享)

    本人网上找了很久都没有一个比较好的cypher文法,于是花了一段时间研究cypher和编写基于antlr4下的cypher文法. 希望对想用做cypher相关工具的朋友有一点用,欢迎交流. 珍重声明: ...

  3. 用const取代宏定义更好的管理内存

    用const取代宏定义更好的管理内存 宏:只是在预处理器里进行文本替换,没有类型,不做任何类型检查,编译器可以对相同的字符串进行优化.只保存一份到 .rodata 段.甚至有相同后缀的字符串也可以优化 ...

  4. Asp.Net 之 通过调用 WScript.Shell 启动本地 exe 程序时产生“ automation服务器不能创建对象 ”的错误

    我们经常需要通过生成 ActiveXObject("WScript.Shell"); 来调用某一exe文件. 设置网页打印的页眉页脚为空: var HKEY_Root,HKEY_P ...

  5. Emacs 配置 Python 编程环境

    python编程环境设置涉及到:自动完成.语法检查.虚拟环境. 为了不把系统搞乱,在python的虚拟环境中安装相关的插件. 一.安装python虚拟环境 virtualenvwrapper sudo ...

  6. CF Amr and Music (贪心)

    Amr and Music time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  7. Eclipse输入任意字母或指定字符出现提示框

    Eclipse默认是输入"."的时候会有提示框提示对应的API. 如果想更方便的输入任意字母或者指定的符号出现提示框设置如下: 打开Eclipse,选中“Window”->& ...

  8. IOC容器初始化过程

    原文链接请参见:http://blog.csdn.net/u010723709/article/details/47046211

  9. 一些xcode5.1创建的工程在xcode6.0下不能编译的问题

    这是因为Xcode5.1.1自动选上了arm64架构, 建议解决办法是: Build Settings-ValidArchitectures中却掉arm64

  10. StringBuilder 类

    表示可变字符字符串.无法继承此类. 此类表示值为可变字符序列的类似字符串的对象.之所以说值是可变的,是因为在通过追加.移除.替换或插入字符而创建它后可以对它进行修改.有关比较,请参见 String 类 ...