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的更多相关文章

  1. Kendo MVVM 数据绑定(一) attr

    Kendo MVVM 数据绑定(一) attr Kendo UI MVVM 数据绑定支持的绑定属性有 attr, checked, click, custom , disabled,enabled, ...

  2. Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events

    本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似,为事件绑定的一般形式.Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理(如鼠标事 ...

  3. Kendo MVVM 数据绑定(十一) Value

    Kendo MVVM 数据绑定(十一) Value Value 绑定可以把 ViewModel 的某个属性绑定到 DOM 元素或某个 UI 组件的 Value 属性.当用户修改 DOM 元素或 UI ...

  4. Kendo MVVM 数据绑定(十) Source

    Kendo MVVM 数据绑定(十) Source Source 绑定可以把 ViewModel 的值和由 Kendo 模板定义的目标元素绑定,如果 ViewModel 的值发生变化,被绑定的目标元素 ...

  5. Kendo MVVM 数据绑定(九) Text

    Kendo MVVM 数据绑定(九) Text Text 绑定可以使用 ViewModel 来设置 DOM 元素的文本属性,如果需要设置 input,textarea,或 select 的显示,需要使 ...

  6. Kendo MVVM 数据绑定(七) Invisible/Visible

    Kendo MVVM 数据绑定(七) Invisible/Visible Invisible/Visible 绑定可以根据 ViewModel 的某个属性来显示/隐藏 DOM 元素.例如: <d ...

  7. Kendo MVVM 数据绑定(六) Html

    Kendo MVVM 数据绑定(六) Html Html 绑定可以使用 ViewMod e 的属性来设置 DOM 元素的 innerHTML 属性.如果 ViewModel 的属性的数据类型不是字符串 ...

  8. Kendo MVVM 数据绑定(五) Events

    Kendo MVVM 数据绑定(五) Events 本篇和 Kendo MVVM 数据绑定(三) Click 类似,为事件绑定的一般形式.Events 绑定支持将 ViewModel 的方法绑定到 D ...

  9. Kendo MVVM 数据绑定(四) Disabled/Enabled

    Kendo MVVM 数据绑定(四) Disabled/Enabled Disabled 和 Enabled 绑定可以根据 ViewModel 的某个属性值的 true,false 来设置 DOM 元 ...

随机推荐

  1. C#支持从自定义日期时间格式到DateTime类型

            /// <summary>         ///         /// </summary>         /// <param name=&quo ...

  2. AI-Info-Micron-Insight:通往完全自主之路

    ylbtech-AI-Info-Micron-Insight:通往完全自主之路 1.返回顶部 1. 通往完全自主之路 自动驾驶汽车正在从未来梦想演变为当代现实,随着技术成熟,个人和公共交通将永远转变. ...

  3. Advanced R之数据结构

    看了几本R语言语法相关的书籍,感觉都不怎么好,在实际使用过程中仍然遇到很多难以理解的问题,后来看了Hadley Wickham的Advanced R,好多问题迎刃而解,今天重温了该书的第一章即数据结构 ...

  4. 微软开业网站----精华 http://www.microsoft.com/opensource/directory.aspx

    http://www.microsoft.com/opensource/directory.aspx

  5. iView之DatePicker的datetimerange校验

    使用DatePicker的type是datetimerange时,处理开始--结束的持续时间校验如下.遇到的问题:时间弹出校验提示,但是程序还是会继续往下走,所以调完校验后,再做判断开始时间是否为tr ...

  6. WPF TabControl SelectionChanged 重复执行的问题

    很邪门的问题,我曾经都感觉是微软的bug了. 问题是这样的:在我的tabcontrol下的tabitem中有一个combobox控件,由于一些原因,需要执行tabcontrol的SelectionCh ...

  7. fastreport整理

    Q1:如何直接打印,不显示打印对话框? frxReport1.PrintOptions.ShowDialog := false; frxReport1.PrepareReport(true); frx ...

  8. phpcms后台栏目权限修改无效的原因和解决方法

    现象:在phpcms后台中,新建角色,然后修改角色对应栏目权限,结果一直只能选择一半数量的栏目.剩下的栏目怎么修改都不生效. 对比: step1:再另一个phpcms后台做同样操作,依旧是这个结果.跟 ...

  9. openstack介绍(二)

    OpenStack services 本节将详细描述OpenStack服务. Compute service overview(计算服务概述) 使用OpenStack云计算计算主机和管理系统.Open ...

  10. charles关于手机APP抓包

    这里相比其他抓包软件来说要简单的多了,具体步骤如下: 1 使手机和电脑在一个局域网内,不一定非要是一个ip段,只要是同一个漏油器下就可以了,比如电脑连接的有线网ip为192.168.16.12,然后手 ...