添加带有css绑定的动态类

Question

我想在payment-method by函数后面添加一个类，并使用剔除的css绑定(在Magento2.1中)。这是当前的代码：

<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
    <div class="payment-method-title field choice">
        <input type="radio"
               name="payment[method]"
               class="radio"
               data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>

类由getCode()返回，它在上面使用id和值。所以我想我可以这样做：

<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked()), getCode()}">

但是它失败了，因为：

knockout.js:2624 Uncaught :无法解析绑定。绑定值: css：{'_active'：(getCode() == isChecked())，getCode() }消息:意外令牌}

<div class="payment-method" data-bind="css: getCode()">

这个很管用。

<div class="payment-method" data-bind="css: {getCode()}">

这不可能。

<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}, attr: {'class': getCode()}">

这也是可行的，但它将覆盖payment-method类，并且_active类在本质上不再被设置。

如何设置动态类？

Answer 1

@tyler_mitchell的评论帮助我自己通过以下线程找到了解决方案：https://stackoverflow.com/a/21528681/928666

我能做到：

<div class="payment-method" data-bind="attr: { 'class': 'payment-method ' + getCode() }, css: {'_active': (getCode() == isChecked())}">

不聪明但很好..。

Answer 2

这段代码是多余的，因为css数据绑定正在被您的attr绑定覆盖。

<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}, attr: {'class': getCode()}">

您可以这样做动态类(假设这些属性是可观察的)：

<div class="payment-method" data-bind="css: CSS">

self.CSS = ko.computed(function() {
    var code = self.getCode();
    var isChecked = self.isChecked();
    return code + ' ' + (code == isChecked ? '_active' : '');
}, viewModel);

Answer 3

再举一个例子，如果有人需要的话

<div data-bind="attr: { 'class': 'mainClass' + (dynamicClassSetOnce ? ' ' + dynamicClassSetOnce : '' }, css: { 'mainClass--focussed': isFocussed }">
...
</div>