敲除类的动态表达式值 - CSS 绑定

knockout dynamic expression value for class - css binding

本文关键字：CSS 绑定 表达式 动态      更新时间：2023-09-26

我在下面有一个淘汰表达式：

<span class='icon' data-bind='css: step_type() '></span>

如果我的step_type((返回寄存器：

<!-- in case of  step_type() return a register -->
<span class='icon 0 1 2 3 4 5 6 7' data-bind='css: step_type() '></span>

<!-- in case of step_type() return a date -->
<span class='icon 0 1 2 3' data-bind='css: step_type() '></span>

我从输出淘汰中注意到的并没有正确获取表达式值，而是获取字符串值中每个字符的索引。 以下是我期望看到的 

<!-- in case of step_type() return: date -->
<span class='icon date' data-bind='css: step_type() '></span>
<!-- in case of step_type() return: register -->
<span class='icon register' data-bind='css: step_type() '></span>

我错过了什么吗？请帮助如何完成此操作。

根据我从你的问题中了解到的

您需要有条件地向元素添加 css . 所以，我们需要做这样的事情.

输入： 

<span class='icon' data-bind='css:{"abc":true}'></span>

输出：

<span class='icon abc' data-bind='css:{"abc":true}'></span>

如果您需要对元素顶部进行if检查，我们去 

<!-- ko if : step_type()== 'your value' -->
<span class='icon' data-bind='css:{"abc":true}'></span>
<!--/ko-->

编辑：然后你需要像下面这样计算step_type 

vm.step_type= ko.Computed(function() {
        return (check condition here) ? "register" : "date";
    }, vm);

以后在你绑定做喜欢 

<span class='icon' data-bind='css:step_type'></span> **(i/p)**
<span class='icon register' data-bind='css:step_type'></span> **(o/p)**

你可以参考这里的文档，巧妙地提到如何处理

在这里工作小提琴

相关文章：