Kendo MVVM 数据绑定(一) attr
2024-08-24 06:07:03
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>
最新文章
- 安装第三方APP好的站点及解除安全与隐私限制
- iOS Start developing ios apps (OC) pdf
- 单片机中断的IE和IP寄存器(摘抄)
- [iOS]The app icon set named ";AppIcon"; did not have any applicable content.
- Android -- 系统信息(内存、cpu、sd卡、电量、版本)获取
- Android使用Dom解析xml
- git问题 next fetch will store in remotes/origin
- Asp与Asp.Net的区别
- css样式积累
- JSP - request - 1
- 《经久不衰的Spring框架:Spring+SpringMVC+MyBatis 整合》
- Android 中图片压缩分析(上)
- 本地phpstudy时常停机连接失败,php.ini文件中9000端口问题
- 5分钟把任意网站变成桌面软件--windows版
- vue组件里定时器销毁问题
- $Django python中使用redis, django中使用(封装了),redis开启事务(管道)
- Lua和C++交互 学习记录之四:全局table交互
- minicom的安装及配置
- websocket使用nginx作为反向代理
- django之创建第6个项目-过滤器