Question

我希望根据文本值对css类进行条件绑定。

<div class="modal-body" data-bind="foreach: messageList">
    <div class="talk-bubble tri-right" data-bind="attr: { css: ko.unwrap(outFrom) === 'outGoing' ? 'right-top' : 'left-top' }">
          <div class="talktext">
               <p data-bind="text: message"></p>
               <span data-bind="text: date"></span>
               <span data-bind="text: outFrom"></span>
               <input data-bind="value: message_number" />
          </div>
    </div>
</div>

Answer 1

可能最容易为每个人制定单独的规则。

<div class="modal-body" data-bind="foreach: messageList">
    <div class="talk-bubble tri-right" data-bind="
        css: { 
            'right-top': outFrom() === 'outGoing',
            'left-top' : outFrom() !== 'outGoing'
        }">
        <div class="talktext">
            <p data-bind="text: message"></p>
            <span data-bind="text: date"></span>
            <span data-bind="text: outFrom"></span>
            <input data-bind="value: message_number" />
        </div>
    </div>
</div>

如果outFrom可能会或可能不会被观察，则替换ko.unwrap（outFrom）。

您还可以在返回类名的消息上放置一个函数并执行

data-bind="css: functionThatReturnsClassName"

如果text等于set attr class，Knockout JS data-bind？

1 个答案: