Question

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

<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>

我错过了什么吗？请帮助完成这项工作。

Answer 1

从我对你的问题的理解

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

输入：

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

OutPut：

<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)**

您可以参考文档here，其中提到了如何处理

工作小提琴here

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

1 个答案: