kendo mvvm：如何定义自定义 css 绑定答案

【问题标题】：kendo mvvm: how to define a custom css bindingkendo mvvm：如何定义自定义 css 绑定
【发布时间】：2013-02-12 00:14:24
【问题描述】：

这是真的吗：（或者我错过了什么？）

如果是，如何定义自定义css绑定？

我找到了一个实现here，但我只有缩小的剑道js文件，谁能给个链接来下载未压缩的剑道js文件？

更新

必须修改kendo.web.js源代码。

【问题讨论】：

您不编辑剑道源，只需将活页夹添加到单独的文件中并在剑道加载后加载它们，将它们放在剑道下方的脚本标签中可能就足够了，确保使用某些东西像 yepnope 或 require.js

【解决方案1】：

Kendo UI 支持设置任意 CSS 属性的“样式”绑定。文档可在此处获得：http://docs.kendoui.com/getting-started/framework/mvvm/bindings/style

附带说明，您无需编辑源代码即可创建自定义活页夹。方法如下：http://docs.kendoui.com/getting-started/framework/mvvm/bindings/custom

最后你可以使用attr绑定来设置class属性：http://jsbin.com/ojayoq/1/edit

【讨论】：

我知道如何定义普通的自定义绑定，
- 如何定义这种自定义绑定？
目前你不能。但是您可以使用此处显示的：feedback.kendoui.com/forums/127393-kendo-ui-feedback/… 它与淘汰赛不同，但可以完成这项工作。
而对于attr绑定方案，有一个问题：如果html元素定义了一些内联css类，会被覆盖：jsbin.com/ojayoq/4/edit。
您不需要源代码来创建自定义活页夹。这个在线demo证明：demos.kendoui.com/web/mvvm/custom.html源码在发行版的src目录下（当然试用版不包含）：docs.kendoui.com/getting-started/downloading-kendo
对于这个问题的新手，KendoUI现在支持绑定css: { active: shouldBeActive }

【解决方案2】：

https://coderwall.com/p/gwa2jg 有几个 CSS 活页夹

CSS 切换

<div data-bind="cssToggle: truthyProperty" 
     data-enabled-css="on-class" 
     data-disabled-css="off-class"></div>

还有

CSS 状态

<div data-bind="cssState: switch"
     data-css-states="stop:red, go:green, slowdown:amber">

【讨论】：

看起来不错，但这些绑定似乎有一个不足：不能将两个或多个 css 类绑定到一个 div，例如：data-bind="css: { answered: answered, answer-accepted: answerAccepted }"
@Dean，cssState: binder 正是这样做的，其 CSS 类与适用于该属性的值一样多。这些没有发货，它们是定制的。
最酷的是匹配范围的，即。 0-25% - 26-50% 等
我认为它们是可行的，cssState binder 对 binder 表达式进行文本解析并将其转换为 JSON，但没有理由不能使用不同的解析器说，“0..25 :low, 26..50:below-mid, 51..75:above-mid, 76-100:high"
@Dean 与 cssState binder 的唯一区别是 value 和 CSS class name 是相反的。 IE。 answerAccepted：已接受答案

【解决方案3】：

我为 Kendo UI 博客编写了一个示例活页夹，它可以满足您的需求： Making Kendo UI Binders for Complex Types

HTML 使用示例：

<div data-bind="class: { selected: isSelected, error: hasError }">

如果isSelected 为真，这将添加“选定”类，如果hasError 为真，则添加“错误”类。同样，如果绑定值是虚假的，它将删除这些类。

【讨论】：

【解决方案4】：

Kendo 现在（自 2015 年第二季度起）提供 CSS class binding 以及样式绑定。

例子：

<div data-bind="css: { someClass: isSomeClassEnabled }"></div>

【讨论】：

【解决方案5】：

this 不是您正在寻找的 CSS 绑定吗？

【讨论】：