Kendo MVVM 数据绑定(八) Style
Kendo MVVM 数据绑定(八) Style
Style 绑定可以通过 ViewModel 绑定到 DOM 元素 CSS 风格属性,例如:
<span data-bind="style: {color: priceColor, fontWeight: priceFontWeight},text: price"></span> <script>
var viewModel = kendo.observable({
price: 42,
priceColor: function() {
var price = this.get("price"); if (price <= 42) {
return "#00ff00";
} else {
return "#ff0000";
}
},
priceFontWeight: function() {
var price = this.get("price"); if (price <= 42) {
return "bold";
} else {
return ""; //will reset the font weight to its default value
}
}
}); kendo.bind($("span"), viewModel);
</script>
这个例子显示:
<span style="color: #00ff00; font-weight: bold">42</span>
42
要注意的是 CSS 属性的名称,如果 CSS 名称中含有连字符(-),比如 font-weight, font-size ,background-color 等,在使用时需要省略到连字符,使用 camel 风格的命名,如 fontWeight, fontSize,backgroundColor 等。
Kendo MVVM 数据绑定(八) Style的更多相关文章
- Kendo MVVM 数据绑定(一) attr
Kendo MVVM 数据绑定(一) attr Kendo UI MVVM 数据绑定支持的绑定属性有 attr, checked, click, custom , disabled,enabled, ...
- 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 数据绑定(七) 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 元 ...
随机推荐
- C#支持从自定义日期时间格式到DateTime类型
/// <summary> /// /// </summary> /// <param name=&quo ...
- AI-Info-Micron-Insight:通往完全自主之路
ylbtech-AI-Info-Micron-Insight:通往完全自主之路 1.返回顶部 1. 通往完全自主之路 自动驾驶汽车正在从未来梦想演变为当代现实,随着技术成熟,个人和公共交通将永远转变. ...
- Advanced R之数据结构
看了几本R语言语法相关的书籍,感觉都不怎么好,在实际使用过程中仍然遇到很多难以理解的问题,后来看了Hadley Wickham的Advanced R,好多问题迎刃而解,今天重温了该书的第一章即数据结构 ...
- 微软开业网站----精华 http://www.microsoft.com/opensource/directory.aspx
http://www.microsoft.com/opensource/directory.aspx
- iView之DatePicker的datetimerange校验
使用DatePicker的type是datetimerange时,处理开始--结束的持续时间校验如下.遇到的问题:时间弹出校验提示,但是程序还是会继续往下走,所以调完校验后,再做判断开始时间是否为tr ...
- WPF TabControl SelectionChanged 重复执行的问题
很邪门的问题,我曾经都感觉是微软的bug了. 问题是这样的:在我的tabcontrol下的tabitem中有一个combobox控件,由于一些原因,需要执行tabcontrol的SelectionCh ...
- fastreport整理
Q1:如何直接打印,不显示打印对话框? frxReport1.PrintOptions.ShowDialog := false; frxReport1.PrepareReport(true); frx ...
- phpcms后台栏目权限修改无效的原因和解决方法
现象:在phpcms后台中,新建角色,然后修改角色对应栏目权限,结果一直只能选择一半数量的栏目.剩下的栏目怎么修改都不生效. 对比: step1:再另一个phpcms后台做同样操作,依旧是这个结果.跟 ...
- openstack介绍(二)
OpenStack services 本节将详细描述OpenStack服务. Compute service overview(计算服务概述) 使用OpenStack云计算计算主机和管理系统.Open ...
- charles关于手机APP抓包
这里相比其他抓包软件来说要简单的多了,具体步骤如下: 1 使手机和电脑在一个局域网内,不一定非要是一个ip段,只要是同一个漏油器下就可以了,比如电脑连接的有线网ip为192.168.16.12,然后手 ...