代码之家 › 专栏 › 技术社区 › steros

添加带有css绑定的动态类

data-binding knockout.js magento class css

1

steros · 技术社区 · 8 年前

我想在后面添加一个类 payment-method 这是当前代码:

<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()}">

但是它失败了:

淘汰赛。js:2624未捕获语法错误:无法解析绑定。消息:意外令牌}

<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()}">

类和 _active 类也不再初始设置。

3 回复 | 直到 8 年前

1

3

tyler_mitchell 8 年前

这段代码是多余的,因为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);

2

0

steros 8 年前

来自@tyler_mitchell的评论帮助我自己通过这条线索找到了解决方案: https://stackoverflow.com/a/21528681/928666

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

不是很聪明但是很好。。。

3

0

sidonaldson 6 年前

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

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