添加带有css绑定的动态类

我想在

支付方法

的后面添加一个类，该类带有敲除css绑定（在Magento 2.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()"/>

但它失败的原因是：

knockout.js:2624未捕获语法错误：无法分析绑定。 绑定值：css:{“u活动”：（getCode（）==isChecked（）），getCode（）} 消息：意外标记}

这很有效

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

这不是

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

这也起作用，但将覆盖

支付方法

类，并且

\u活动

类也不再初始设置

---

如何设置该动态类？

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

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

这就是如何实现动态类（假设这些属性是可观察的）：

self.CSS=ko.computed（函数（）{
var code=self.getCode（）；
var isChecked=self.isChecked（）；
返回代码+''+（代码==isChecked？'\u active'：''）；
}，视图模型）；

来自@tyler_mitchell的评论帮助我通过以下线索找到了解决方案：

我可以做到：

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

---

不是很聪明，但很好…

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

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

...

谢谢，但假设我不能添加其他函数。根据文档，我可以设置多个css类。这对函数参数不起作用吗？不，您可以

->，但这可能不起作用，因为它是动态类和设置静态的混合体，所以最好在一个地方进行。我只想说这是一种更为理想的方式。因为这只是一个电话，而不是几个电话，所以我试过了，但出现了一个错误，我用准确的错误信息更新了我的问题。对我来说，这个错误意味着你不能混合静态和动态。做一个或另一个。如果您使用什么getcode和ischecked更新问题。我可以给你们精确的解决方案，但若你们能很容易地添加一个函数，我会按照泰勒·米切尔的建议去做。

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

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

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