2

次のHTMLセグメントがあります。

<table class="answerGrid" data-bind="foreach: rows">
    <tr data-bind="foreach: $data">
        <td>
            <button data-bind="click : $root.onAnswerClick, css: isSelected" type="button">
                <div data-bind="html: $data.text" style="height: 100%"></div>
            </button>
        </td>
    </tr>
</table>

私がやろうとしているのは、計算された関数を介して要素のclass属性を動的に設定することです。buttonisSelected

var Answer = function () {
    var self = this;

    self.id = "";
    self.text = "";
    self.selected = ko.observable(false);

    self.isSelected = ko.computed(function () {
        return self.selected() ? "selected-answer" : "answer";
    }, self);
};

関数が実行されており、Answerまだ選択されていないために「answer」というテキストが返されることを確認しました。ただし、出力されたHTMLを見ると、次のようになります。

<td>
    <button data-bind="click : $root.onAnswerClick, css: isSelected" type="button" class="0 1 2 3 4 5 startsWith">
        <div data-bind="html: $data.text" style="height: 100%">4-7 days</div>
    </button>
</td>

classKOが属性を「012 345startsWith」に設定している理由について私は完全に混乱しています。

誰か助けてくれませんか？

4

1 に答える 1

2

別のアプローチを使用します。

<button data-bind="css: { 'answer': !selected(), 'selected-answer': selected() }" type="button">
    <span>Testing</span>
</button>​

したがって、計算された関数をまったく使用せずselected、回答のプロパティに直接アクセスします。私はこのSOの質問からこのテクニックを見つけました：

KnockoutJS cssバインディング！= true

于 2012-11-17T21:20:27.593 に答える