Kendo UI开发教程(12): Kendo MVVM 数据绑定(一) [email protected]() 增加attr-程序员宅基地

技术标签: Kendo 开发教程  教程  Kendo  

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>
 
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/mapdigit/article/details/10060567

智能推荐

源代码图纸文档防泄密场景方案分析-程序员宅基地

文章浏览阅读161次,点赞5次,收藏3次。财务数据、员工信息、工资信息、客户和业务数据等被员工非法获取、外泄

React学习记录-程序员宅基地

文章浏览阅读936次,点赞22次,收藏26次。React核心基础

Linux查磁盘大小命令,linux系统查看磁盘空间的命令是什么-程序员宅基地

文章浏览阅读2k次。linux系统查看磁盘空间的命令是【df -hl】,该命令可以查看磁盘剩余空间大小。如果要查看每个根路径的分区大小,可以使用【df -h】命令。df命令以磁盘分区为单位查看文件系统。本文操作环境:red hat enterprise linux 6.1系统、thinkpad t480电脑。(学习视频分享:linux视频教程)Linux 查看磁盘空间可以使用 df 和 du 命令。df命令df 以磁..._df -hl

Office & delphi_range[char(96 + acolumn) + inttostr(65536)].end[xl-程序员宅基地

文章浏览阅读923次。uses ComObj;var ExcelApp: OleVariant;implementationprocedure TForm1.Button1Click(Sender: TObject);const // SheetType xlChart = -4109; xlWorksheet = -4167; // WBATemplate xlWBATWorksheet = -4167_range[char(96 + acolumn) + inttostr(65536)].end[xlup]

若依 quartz 定时任务中 service mapper无法注入解决办法_ruoyi-quartz无法引入ruoyi-admin的service-程序员宅基地

文章浏览阅读2.3k次。上图为任务代码,在任务具体执行的方法中使用,一定要写在方法内使用SpringContextUtil.getBean()方法实例化Spring service类下边是ruoyi-quartz模块中util/SpringContextUtil.java(已改写)import org.springframework.beans.BeansException;import org.springframework.context.ApplicationContext;import org.s..._ruoyi-quartz无法引入ruoyi-admin的service

CentOS7配置yum源-程序员宅基地

文章浏览阅读2w次,点赞10次,收藏77次。yum,全称“Yellow dog Updater, Modified”,是一个专门为了解决包的依赖关系而存在的软件包管理器。可以这么说,yum 是改进型的 RPM 软件管理器,它很好的解决了 RPM 所面临的软件包依赖问题。yum 在服务器端存有所有的 RPM 包,并将各个包之间的依赖关系记录在文件中,当管理员使用 yum 安装 RPM 包时,yum 会先从服务器端下载包的依赖性文件,通过分析此文件从服务器端一次性下载所有相关的 RPM 包并进行安装。_centos7配置yum源

随便推点

【方位估计】基于MUSIC算法、加权MUSIC算法和ROOT-MUSIC算法方位估计附Matlab代码-程序员宅基地

文章浏览阅读921次,点赞17次,收藏19次。方位估计是信号处理领域中一个重要的问题,它涉及到了信号的方向和角度的估计。在无线通信、雷达、声呐等领域,方位估计都有着重要的应用。本文将介绍三种常用的方位估计算法:MUSIC算法、加权MUSIC算法和ROOT-MUSIC算法。首先我们来介绍MUSIC算法。MUSIC算法是一种基于信号子空间的方法,它利用信号子空间的特性来实现方位估计。

DZMFullPage - 前端分页动画插件,兼容IE9+,支持Vue-程序员宅基地

文章浏览阅读73次。分页指定DOM页页页页页页导入插件。

【图像分割】基于Crow搜索优化模糊聚类算法的医学图像分割研究附matlab代码-程序员宅基地

文章浏览阅读1.1k次,点赞30次,收藏24次。图像分割是医学图像分析中的关键步骤,它可以将图像中的不同组织或结构区分开来。模糊聚类算法是一种常用的图像分割方法,但其聚类中心的选择对分割结果有很大的影响。本文提出了一种基于 Crow 搜索优化(CSO)算法的模糊聚类算法,用于医学图像分割。CSO 是一种新型的群智能优化算法,具有收敛速度快、鲁棒性强等优点。本文将 CSO 应用于模糊聚类算法的聚类中心优化,以提高分割精度。

Android开发-Android常用组件-TextView文本框-程序员宅基地

文章浏览阅读1k次。04 常用组件4.1 TextViewTextView (文本框),用于显示文本的一个控件。文本的字体尺寸单位为sp :sp: scaled pixels(放大像素). 主要用于字体显示。文本常用属性:属性名作用id为TextView设置一个组件id,根据id,我们可以在Java代码中通过findViewById()的方法获取到该..._

STM32单片机示例:多个定时器同步触发启动_stm32 定时器同步-程序员宅基地

文章浏览阅读3.7k次,点赞3次,收藏14次。多个定时器同步触发启动是一种比较实用的功能,这里将对此做个示例说明。_stm32 定时器同步

android launcher分析和修改10,Android Launcher分析和修改9——Launcher启动APP流程(转载)...-程序员宅基地

文章浏览阅读348次。出处 : http://www.cnblogs.com/mythou/p/3187881.html本来想分析AppsCustomizePagedView类,不过今天突然接到一个临时任务。客户反馈说机器界面的图标很难点击启动程序,经常点击了没有反应,Boss说要优先解决这问题。没办法,只能看看是怎么回事。今天分析一下Launcher启动APP的过程。从用户点击到程序启动的流程,下面针对WorkSpa..._回调bubbletextview

推荐文章

热门文章

相关标签