时间戳

首页 > 解决方案 > KnockoutJS 使用 css 属性添加静态和动态类名

javascript - KnockoutJS 使用 css 属性添加静态和动态类名

问题描述

我想添加一个动态类名，该类名将基于一些检查来自 javascript。但是有一类navigate-forward也是基于一些检查显示的。如何将两者结合起来？

以下是我的代码 -

<span class="menu-item" data-bind="text: data.description,
            css: {
                    'navigate-forward': !child.action,
                    child.className //I tried something like this which doesn't work
            }"></span>

child.className将有一个基于 JavaScript 代码检查的值。无论它给出什么价值，我都想将该类添加到 thisspan中。

前任。如果child.className是tooltip，那么应该将该类添加到跨度中。

输出

<span class="menu-item navigate-forward tooltip">Menu item</span>

标签： javascriptknockout.js

解决方案

您还可以将样式和 css 绑定与包含所有样式和类的对象一起使用，而不是使用单独的类名。这允许采用更加程序化的方法。

function viewModel(){
  var self = this;
  this.description = ko.observable('placeholder text');
  this.useBlue = ko.observable(false);
  this.borderClass = ko.observable("red-border");

  this.classes = ko.pureComputed(function(){
    var obj = {
      'blue-background': self.useBlue()
    };
    obj[self.borderClass()] = true;
    return obj;
  });
}

ko.applyBindings(new viewModel());
.blue-background {
  background-color: lightblue;
}

.red-border {
  border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<span class="menu-item" data-bind="text: description, css: classes"></span>
<br/>
            
<input type="button" data-bind="click: function(){ useBlue(!useBlue()) }" value="toggle" />

推荐阅读