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

Posted 2023-05-07

【中文标题】kendo mvvm：如何定义自定义 css 绑定

【英文标题】：kendo mvvm: how to define a custom css binding

【发布时间】：2013-02-12 00:14:24

【问题描述】：

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

Kendo UI MVVM 不支持 css 绑定；

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

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

更新

临时解决方案：http://feedback.kendoui.com/forums/127393-kendo-ui-feedback/suggestions/2782980-add-an-mvvm-css-binding

必须修改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 绑定吗？