Kendo MVVM 数据绑定(一) attr
Kendo MVVM 数据绑定(一) attr
Kendo UI MVVM 数据绑定支持的绑定属性有 attr, checked, click, custom , disabled,enabled, events, html, invisible, , style, text ,value, visible ,这些属性可以绑定到 DOM 元素或是 Kendo UI 组件的属性。本篇介绍 attr 绑定。attr 支持把 ViewModel 的属性或方法绑定到 DOM 元素的某个属性, 比如设置 hyperlink 的 herf 和 title 属性, image 元素的 src 或 alt 属性。 其基本用法为attr: { attribute1: field1, attribute2: field2 }其中 attribute1 和 attribute2 为 DOM 元素的属性名称, 而 field1,field2 为 ViewModel 对象的值域(属性)的名称。比如:
<img id="logo" data-bind="attr: { src: imageSource, alt: imageAlt }" />
<script>
var viewModel = kendo.observable({
imageSource: "http://www.kendoui.com/image/kendo-logo.png",
imageAlt: "Kendo Logo"
}); kendo.bind($("#logo"), viewModel);
</script>
在本例中,image 元素的 src 和 alt 属性被绑定到 viewModel 对象的 imageSource 和 imageAlt 属性。 当调用 kendo.bind 方法,image 元素和下面 HTML 元素等效:
<img id="logo" src="/attachments/image/wk/kendouidevelopmenttutorial/kendo-logo.png" alt="Kendo Logo"" />
此时,如果修改 viewModel 的 imageSource 和 imageAlt 属性的值,页面上显示的图片也随之发生变化。
注意:如果需要绑定到 DOM 元素的 value 或 checked 属性,你需要使用 Kendo MVVM 的 value 和 checked 绑定方法。
attr 绑定也支持设置 HTML5 数据属性绑定,例如:
<div data-bind="attr: { data-foo: fooValue, data-bar: barValue }"></div> <script>
var viewModel = kendo.observable({
fooValue: "foo",
barValue: "bar"
}); kendo.bind($("div"), viewModel);
</script>
Kendo MVVM 数据绑定(一) attr的更多相关文章
- Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events
本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似,为事件绑定的一般形式.Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理(如鼠标事 ...
- Kendo MVVM 数据绑定(十一) Value
Kendo MVVM 数据绑定(十一) Value Value 绑定可以把 ViewModel 的某个属性绑定到 DOM 元素或某个 UI 组件的 Value 属性.当用户修改 DOM 元素或 UI ...
- Kendo MVVM 数据绑定(十) Source
Kendo MVVM 数据绑定(十) Source Source 绑定可以把 ViewModel 的值和由 Kendo 模板定义的目标元素绑定,如果 ViewModel 的值发生变化,被绑定的目标元素 ...
- Kendo MVVM 数据绑定(九) Text
Kendo MVVM 数据绑定(九) Text Text 绑定可以使用 ViewModel 来设置 DOM 元素的文本属性,如果需要设置 input,textarea,或 select 的显示,需要使 ...
- Kendo MVVM 数据绑定(八) Style
Kendo MVVM 数据绑定(八) Style Style 绑定可以通过 ViewModel 绑定到 DOM 元素 CSS 风格属性,例如: <span data-bind="sty ...
- Kendo MVVM 数据绑定(七) Invisible/Visible
Kendo MVVM 数据绑定(七) Invisible/Visible Invisible/Visible 绑定可以根据 ViewModel 的某个属性来显示/隐藏 DOM 元素.例如: <d ...
- Kendo MVVM 数据绑定(六) Html
Kendo MVVM 数据绑定(六) Html Html 绑定可以使用 ViewMod e 的属性来设置 DOM 元素的 innerHTML 属性.如果 ViewModel 的属性的数据类型不是字符串 ...
- Kendo MVVM 数据绑定(五) Events
Kendo MVVM 数据绑定(五) Events 本篇和 Kendo MVVM 数据绑定(三) Click 类似,为事件绑定的一般形式.Events 绑定支持将 ViewModel 的方法绑定到 D ...
- Kendo MVVM 数据绑定(四) Disabled/Enabled
Kendo MVVM 数据绑定(四) Disabled/Enabled Disabled 和 Enabled 绑定可以根据 ViewModel 的某个属性值的 true,false 来设置 DOM 元 ...
随机推荐
- Hadoop——hive安装
安装前先确保安装好MySQL,具体见hadoop_MySQL安装 1.下载hive(下载前先去spark官网看下sparkSQL支持到哪个版本的hive,本文hive版本为1.2.1) 2.解压到/u ...
- 修改eclipse中的propersties文件的默认编码格式
最近遇到每次新建工程里无论在总得工程设置了utf-8还是刚刚建立的空间设置都没有效果, 原来properties文件的设置要单独弄,如下图所示
- C#窗体上绘制矩形
先上效果图 鼠标三个事件 private void Form1_MouseDown(object sender, MouseEventArgs e) { //记录开始点 this.mousedown ...
- 【248】◀▶IEW-Unit13
Unit 13 Technology 流程图讲解 1.model1对应图片讲解 2.Model1范文分析 Model 1 The ice cream making process has five k ...
- wpf Datagrid 的全选
在我的一个datagrid的一列中需要全选框,所以我在样式中是这样写的: <DataGridTemplateColumn.Header> <CheckBox> <i:In ...
- Thinkpad 拆光驱更换光驱硬盘支架、拆光驱面板 T400 T440
拆光驱.硬盘装支架的环节就不多说了.主要说下拆光驱面板. 先拿细物(区别针.回形针),捅这个洞,就能把光驱仓打开弹出来后,反过来,这里有个卡扣放大看,按住这卡扣,然后往外掰,把面板掰出来 掰出来的面板 ...
- Swoole 协程 MySQL 客户端与异步回调 MySQL 客户端的对比
Swoole 协程 MySql 客户端与 异步回调 MySql 客户端的对比 为什么要对比这两种不同模式的客户端? 异步 MySQL 回调客户端是虽然在 Swoole 1.8.6 版本就已经发布了, ...
- WSAData是个什么结构体用什么用
WSAData机构体如下 功能是:存放windows socket初始化信息.struct WSAData { WORD wVersion; WORD wHighVersion; char szDes ...
- 洛谷P3382 【模板】三分法(三分找凹凸点)
P3382 [模板]三分法 题目描述 如题,给出一个N次函数,保证在范围[l,r]内存在一点x,使得[l,x]上单调增,[x,r]上单调减.试求出x的值. 输入输出格式 输入格式: 第一行一次包含一个 ...
- EasyUI获取所有选中行中的某一列的值
var PointIds=[]; for (var i = 0; i < wPoint_rows.length; i++) { //PointIds.push(wPoint_rows[i][&q ...