Kendo UI开发教程(12): Kendo MVVM 数据绑定(一) attr

2023-11-11



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对象的值域(属性)的名称。
比如:

1 <img id="logo" data-bind="attr: { src: imageSource, alt: imageAlt }" />
2 <script>
3 var viewModel = kendo.observable({
4     imageSource: "http://www.kendoui.com/image/kendo-logo.png",
5     imageAlt: "Kendo Logo"
6 });
7  
8 kendo.bind($("#logo"), viewModel);
9 </script>

在本例中,image元素的 src和 alt属性被绑定到viewModel对象的 imageSource和 imageAlt属性。 当调用kendo.bind方法,image元素和下面HTML元素等效:

1 <img id="logo" src="http://www.kendoui.com/image/kendo-logo.png"alt="Kendo Logo"" />

此时,如果修改viewModel的imageSource和 imageAlt属性的值,页面上显示的图片也随之发生变化。

20130817001

注意:如果需要绑定到DOM元素的value或checked属性,你需要使用Kendo MVVM的 value和 checked绑定方法。

attr 绑定也支持设置HTML5 数据属性绑定,例如:

1 <div data-bind="attr: { data-foo: fooValue, data-bar: barValue }"></div>
2  
3 <script>
4 var viewModel = kendo.observable({
5     fooValue: "foo",
6     barValue: "bar"
7 });
8  
9 kendo.bind($("div"), viewModel);
10 </script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Kendo UI开发教程(12): Kendo MVVM 数据绑定(一) attr 的相关文章

  • java多线程总结:原理结合源码详细讲解 - 简单实用

    执行策略 线程执行的方式 串行执行 比如 医院给病人看病的时候 可以让所有的病人都拍成一个队形 让一个医生统一的看病 医生 线程 病人看病 任务 这种一个医生给一群站好队形的病人看病 映射到java就相当于 单线程串行执行任务 映射到我们j
  • 理解D3D—(2)最多混合几层texture

    理解D3D 2 最多混合几层texture 先提出问题 Q 要是模型有很多层贴图 再加上shadow map 还有ssao 岂不是会不够用了 A 参考资料 IDirect3DDevice9 SetTexture Assigns a text
  • Linux静态库与动态库

    文章目录 一 源代码的组织 二 静态库 三 动态库 四 静态库与动态库的优缺点 1 优点 2 缺点 五 动态库的优缺点 1 优点 2 缺点 六 编译的优先级 七 版权声明 一 源代码的组织 我们通常把公用的自定义函数和类从主程序中分离出来
  • mnt/hgfs 共享文件夹文件丢失不见

    Vmware centos mnt hgfs 共享文件夹文件丢失 我在强制虚拟机关机后 再次打开发现原先与windows共享的文件夹没有文件了 熟悉的同学都知道windows和Vmware如何共享文件夹 使用vmware tools 在li
  • 硅基生命之漫谈-1:天马行空

    1 身 生理 硬件 1 1 分解与组合 原子 分子 有机分子 基因 器官 组织 人体 1 2 五官 眼 摄像头 耳 拾音器 鼻 各种气体床传感器 口 发声器 舌 味道传感器 1 3 人体八大系统 运动系统 手 足 身体 运动 神经系统 眼
  • ChatGPT对教育发展方向的影响

    ChatGPT 对教育发展的影响主要体现在以下几个方面 智能化教育 通过 ChatGPT 这样的语言模型 可以提供智能的教育辅助 如自动纠错 智能问答等 提高教学效率和学习效果 在线教育 通过使用 ChatGPT 可以在线提供教育服务 消除

随机推荐

  • UVM环境(env)树形结构

    UVM验证环境的组成 sequencer 负责将数据转给 driver driver 负责数据的 发送 driver 有时钟 时序的概念 agent 其实只是简单的把 driver monitor 和 sequencer 封装在一起 age
  • 微信小程序配置不同页面title

    1 配置全局title 在app json中window配置navigationBarTitleText 2 配置不同页面title 在页面的json文件中单独配置navigationBarTitleText 注意 如果保存之后不刷新执行以
  • spring中的@Configuration配置类和@Component

    在Spring的开发工作中 基本都会使用配置注解 尤其以 Component及 Configuration为主 当然在Spring中还可以使用其他的注解来标注一个类为配置类 这是广义上的配置类概念 但是这里我们只讨论 Component和
  • Redis常用数据结构及应用场景

    1 概述 Redis 一个开源的基于键值对 Key Value NoSQL 数据库 使用 ANSIC 语言编写 支持网络 基于内存但支持持久化 性能优秀 并提供多种语言的 API 我们要首先理解一点 我们把 Redis 称为 KV 数据库
  • Python文件操作常用的API(open函数使用)

    打开文件 获取文件对象 fp open file mode encoding file 要操作的文件路径 使用的时候注意目录的拼接 mode 打开方式 encoding 编码方式 关于第一个参数file需要注意的是 文件的路径 使用的时候要
  • 30个简单又实用的Python代码

    作者 billy 版权声明 著作权归作者所有 商业转载请联系作者获得授权 非商业转载请注明出处 1 重复元素判定 def all unique lst return len lst len set lst x 1 1 2 2 3 2 3 4
  • 冬至,这一天,与汤圆饺子一样暖心的——还有我呢

    冬至 送你一碗万事如意的汤圆 一碗幸福安康的饺子 用真情煮水 以祝福调味 让你吃出一天好运气 一年好福气 视腾与你相伴 这一天 与汤圆饺子一样暖心的 还有我呢
  • 下载对应版本的torch-geometric

    本篇主要针对使用torch geometric读取数据时出现错误 The data object was created by an older version of PyG If this error occurred while loa
  • css fixed定位失效问题

    css fixed定位失效问题 fixed定位失效问题的原因多半在于fixed定位的元素其祖先的transform perspective 或 filter属性非none 导致fixed定位不再参照视口进行定位 而是参照祖先进行定位 MDN
  • c语言int型能储存的最大数,int类型在内存中的存储方式

    Q1 int类型在内存中是以何种方式存储的 要解决这个问题 我们需要首先比较深入地理解下int类型 本文中的int类型的相关数据都以32位操作系统下的VC 6 0编译器环境为准 在下表中可以看到 int类型表示带有符号的整型 而unsign
  • AMD第四代EPYC拼上最后一块拼图 智能边缘市场烽烟再起

    2023年5月初 有媒体爆料称 代号 Siena 锡耶纳 的AMD EPYC 霄龙 8004系列处理器已通过了SATA IO的验证 当时的EPYC 8004可谓犹抱琵琶半遮面 9月18日 AMD正式推出EPYC 8004系列处理器 千呼万唤
  • JVM-内存结构

    目录 1 什么是JVM 2 jvm的内存结构 2 1程序计数器 2 1 1定义 2 1 2Java程序的运行原理 2 2虚拟机栈 2 2 1定义 2 2 2栈内存溢出 2 3线程运行诊断 3 本地方法栈 4 堆 4 1定义 4 2堆内存溢出
  • shell脚本之如使用return和exit

    文章目录 shell脚本之如使用return和exit 一 exit和return基础 EXIT退出指令举例 在函数中使用return语句退出举例 二 最佳实践 三 子脚本返回非零状态码时导致主控脚本退出中断的问题 问题描述 重要 问题分析
  • Windows下julia编程环境搭建

    Windows下julia编程环境搭建 jupyter notebook环境配置 julia vscode环境配置 参考 jupyter notebook环境配置 安装包下载并安装 安装时可以勾选add julia to path http
  • 带你深入了解==和equals 的区别 ?

    1 功能不同 是判断两个变量或实例是不是指向同一个内存空间 equals 是判断两个变量或实例所指向的内存空间的值是不是相同 2 定义不同 equals 在JAVA中是一个方法 在JAVA中只是一个运算符号 3 运行速度不同 比 equal
  • Vulkan Android 实战 - 接口导入

    大家好 接下来将为大家介绍Android Vulkan 实战 接口导入 首先要确定手机是否支持Vulkan 可以下载一个AIDA64应用app 在设备中如果能找到vulkan设备 说明支持 否则不支持 严格按照官方介绍的步骤一步步执行 就能
  • 网站备案后可以换服务器吗,域名备案后可以更换服务器吗

    域名备案后可以更换服务器吗 内容精选 换一换 不可以 只有购买了华为云产品资源 如有确定的 包年 包月 弹性云服务器 包年 包月 弹性公网IP 华为云才是您的接入商 才可以代操作申请网站备案 您可以购买如下任一产品 用于网站备案使用 ECS
  • perl子程序调用

    perl子程序调用 use strict 使用严格的编程方式 sub用来定义子程序 参数在 这个数组里 数组里的第一个元素是 0 sub large if 0 gt 1 print 0 else print 1 large 15 12 su
  • Oracle数据单实例多实例服务示例

    在我们工作时 有时需要一个oracle实例被不同网段的ip访问 从而需要开通2个或以上的实例服务 如下为例子 listener ora文件内容 listener ora Network Configuration File oracle a
  • Kendo UI开发教程(12): Kendo MVVM 数据绑定(一) attr

    Kendo UI MVVM数据绑定支持的绑定属性有 attr checked click custom disabled enabled events html invisible style text value visible 这些属性