KnockoutJS(3)-绑定语法

绑定语法大致分为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>

时间: 2024-08-03 23:24:09

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

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

注意:这是一种高级技术,通常仅在创建可重用绑定或扩展语法的库时使用. 这不是你通常需要做的时候使用Knockout构建应用程序. 从Knockout 3.0开始,开发人员可以通过提供在绑定过程中重写DOM节点和绑定字符串的回调来定义自定义语法. 预处理绑定字符串 您可以通过为特定绑定处理程序(例如click,visible或任何自定义绑定处理程序)提供绑定预处理程序,来挂钩Knockout的逻辑来解释数据绑定属性. 为此,将预处理函数附加到绑定处理程序: ko.bindingHandlers.y

Knockout应用开发指南 第三章:绑定语法

12   value 绑定 目的 value绑定是关联DOM元素的值到view model的属性上.主要是用在表单控件<input>,<select>和<textarea>上. 当用户编辑表单控件的时候, view model对应的属性值会自动更新.同样,当你更新view model属性的时候,相对应的元素值在页面上也会自动更新. 注:如果你在checkbox或者radio button上使用checked绑定来读取或者写入元素的 checked状态,而不是value

第三章:绑定语法(1)

第三章所有代码都需要启用KO的 ko.applyBindings(viewModel); 功能,才能使代码生效,为了节约篇幅,所有例子均省略了此行代码. 1 visible 绑定 目的 visible绑定到DOM元素上,使得该元素的hidden或visible状态取决于绑定的值. 例子 <div data-bind="visible: shouldShowMessage"> You will see this message only when "shouldSh

第三章:绑定语法(3)

value 绑定 目的 value绑定是关联DOM元素的值到view model的属性上.主要是用在表单控件<input>,<select>和<textarea>上. 当用户编辑表单控件的时候, view model对应的属性值会自动更新.同样,当你更新view model属性的时候,相对应的元素值在页面上也会自动更新. 注:如果你在checkbox或者radio button上使用checked绑定来读取或者写入元素的 checked状态,而不是value 值的绑定.

KnockoutJS学习笔记10:KonckoutJS foreach绑定

KnockoutJS foreach绑定用来处理数组,通常用来将一个数组绑定到一个列表或者table中.在foreach绑定中,我们可以使用if.with等嵌套绑定. 示例代码: <table> <thead> <tr><th>First name</th><th>Last name</th></tr> </thead> <tbody data-bind="foreach: peop

KnockOut 绑定之foreach绑定(mvc+knockout)

什么时候使用foreach绑定 foreach绑定对于数组中的每一个元素复制一节标记语言,也就是html,并且将这节标记语言和数组里面的每一个元素绑定.当我们呈现一组list数据,或者一个表格的时候,十分有用. 如果你绑定的数组是一个"监控数组" ,observable array,(和wpf里面的ObservableCollection<T>差不多).当你添加或移除,或者重新排序数组里面的元素的时候,会动态的更新UI界面.并且此时并不会影响原先的DOM元素.这样比我们直接

[后端人员耍前端系列]KnockoutJs篇:使用WebApi+Bootstrap+KnockoutJs打造单页面程序

一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用,本专题将介绍如何使用WebApi+Bootstrap+KnockoutJs+Asp.net MVC来打造一个单页面Web程序.这种模式也是现在大多数公司实际项目中用到的. 二.SPA(单页面)好处 在介绍具体的实现之前,我觉得有必要详细介绍了SPA.SPA,即Single Page Web App

KnockoutJS(2)-监控属性

本节主要涉及到3个内容: 1. 监控属性 Observables (这个用的比较多,但是其本身使用比较简单,唯一需要注意就是,它监控的对象是一个方法,所以取值和设置值的时候容易混淆) 2. 计算属性  Computed Observable (这个在新增计算列,或者对字段属性值的读写进行验证.转换时特别有用) 3. 监控属性数组 Observable Arrays (这个用的较少,一开始不需要太深入,毕竟直接绑定数组进行简单显示的情况不多) 下面分别简单介绍一下各自的用法. 1. 监控属性Obs

【分享】WeX5的正确打开方式(3)——绑定机制

今天整理一下WeX5的绑定机制. 原生的问题  假设我们做一个订单系统,需要显示商品单价,然后可以根据输入数量计算出总价并显示出来.使用原生代码也很容易实现,效果:         代码如下: <!--HTML code--> Price: <span id="price"></span><br /> Account: <input type="text" id="account" value