knockout.js 使用Knockout向数据绑定添加多个CSS元素

n3h0vuf2 于 2023-05-17 发布在其他

关注(0)|答案(2)|浏览(211)

我需要添加多个css类到一个div使用敲除。
我有这个div：

<div data-bind="css: {'case-header': model.caseHeader1, 'case-type-1': model.caseHeader2, 'case-type-2': model.caseHeader3}">

model.caseHeader1是默认值。caseHeader 2/3仅在满足条件时为真。我们的设计工程师告诉我，css类'case-header'需要在所有三个和添加css类'case-type-1/2'沿着侧'case-header'。
所以我这样做了：

<div data-bind="css: {'case-header': model.caseHeader1, 'case-header case-type-1': model.caseHeader2, 'case-header case-type-2': model.caseHeader3}">

现在UI中的一个模型类型正确显示，另一个只显示case-type-1/2。
我也试过这个：

<div data-bind="class: 'case-header', css: {'case-header': model.caseHeader1, 'case-header case-type-1': model.caseHeader2, 'case-header case-type-2': model.caseHeader3}">

还有这个

<div class="case-header" data-bind="css: {'case-header': model.caseHeader1, 'case-header case-type-1': model.caseHeader2, 'case-header case-type-2': model.caseHeader3}">

很不幸，没有成功。
如果需要，这里是相关的 typescript ：

self.model.caseHeader1 = ko.computed(function () {
        return !self.model.useColorHeaderCaseHistory(); //a true false boolean that returns true if the client is using it, in this case, it is true
    });

    self.model.caseHeader2 = ko.computed(function () {
        return self.model.isRatingCase() && self.model.useColorHeaderCaseHistory();
    });

    self.model.caseHeader3 = ko.computed(function () {
        return self.model.isQiCase() && self.model.useColorHeaderCaseHistory();
    });

knockout.js

来源：https://stackoverflow.com/questions/76239642/adding-multiple-css-elements-to-a-data-bind-with-knockout

2条答案

按热度按时间

ffvjumwh1#

我让这一切变得很困难。当我考虑到所有的模型都需要css类'case-header'时，我只是把它 Package 在另一个div中：

div class="case-header">
        <div data-bind="css: {'case-header': model.caseHeader1, 'case-type-1': model.caseHeader2, 'case-type-2': model.caseHeader3}">
</div>
</div>

解决了我所有的问题现在我非常确定我也不需要在数据绑定中进行第一次检查。

赞(0）回复(0）举报 2023-05-17

fxnxkyjh2#

处理元素类的一种更有效的方法是为class绑定使用computed。示例：
HTML：

<div data-bind="class: caseClasses">What class am I?: <span data-bind="text: caseClasses"></span></div>

模型计算方法：

this.caseClasses = ko.computed(() => {
    const classes = [];

    if (!this.useColorHeaderCaseHistory()) {
      classes.push('caseHeader1')
    } else {
      if (this.isRatingCase()) classes.push('caseHeader2');

      if (this.isQiCase()) classes.push('caseHeader3');
    }
    return classes.join(' ');
  });

请看这个js fiddle的工作示例：knockout class binding

赞(0）回复(0）举报 2023-05-17

我来回答

knockout.js 使用Knockout向数据绑定添加多个CSS元素

2条答案

相关问题

热门标签

最新问答