Question

I have the following HTML segment:

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

What I’m trying to do is dynamically set the class attribute of the button element via the isSelected computed function:

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

The function is being executed, and I’ve checked that the text “answer” is returned due to the Answer not yet being selected. However, when I look at the outputted HTML, it looks like this:

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

I’m totally confused as to why KO is setting the class attribute to “0 1 2 3 4 5 startsWith”.

Can anyone help me please?

Answer 1

I’m going to use a different approach:

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

So I’m not going to use the computed function at all, rather I’ll directly access the selected property of the answer. I found this technique via this SO question:

KnockoutJS css binding != true