Knockout.js单击时更改(而不是切换）css类

我试图在knockout.js点击事件上操作css类，但它不起作用。目前我正在基于$data.IsSelected元素（true|false）的值绑定css类。我无法找到正确的方法来做我想做的事情——例如，我应该用DOM进行操作（就像我现在试图做的那样），还是应该将observableArray元素的值改为true而不是false，然后更新ViewModel，所以理论上这必须更改css类。这是JS。

<script>
        function StyleViewModel() {
            var self = this;
            self.pref = ko.observableArray();
            self.img = ko.observableArray(["img/style1.png", "img/style2.png", "img/style3.png", "img/style4.png", "img/style5.png", "img/style6.png"]);
            self.toggle = function (data, event) {
                if (data.IsSelected == true) {  
                    //Here i'm trying to manipulate with DOM directly                 
                    $(event.target).closest("div").removeClass("txt-active").addClass("txt");
                    $(event.target).find("a.button").text("Добавить");
                }
                else {                 
                    $(event.target).removeClass("txt").addClass("txt-active");
                    $(event.target).find("div.txt-active > a.button").text("Добавлено");
                }
            }
            $.getJSON('/api/usersprofiles?userguid=' + $("#MainContent_guid").val(), self.pref);
        }
        $(document).ready(function () {
            ko.applyBindings(new StyleViewModel());
            $("#go").click(function () {
                $("div.test-block").each(function () {
                    var style = $(this).find("h3").text();
                    var option = $(this).find("a").text();
                    var selected;
                    if (option == "Добавить") {
                        selected = false;
                    }
                    else if (option == "Добавлено") {
                        selected = true;
                    }
                    var json = "{'UserGUID':'" + $("#MainContent_guid").val() + "', 'Style':'" + style + "', 'Selected':'" + selected + "'}"
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        contentType: 'application/json; charset=utf-8',
                        url: "/api/usersprofiles",
                        data: json,
                        success: function () { },
                        error: function (xhr, status, error) {
                            var err = eval("(" + xhr.responseText + ")");
                            alert(err.Message);
                        }
                    });
                });
                setTimeout(function () {
                    window.location.replace("default.aspx");
                }, 3000);
            });
        });
    </script>

这是HTML显示绑定：

<input type="hidden" runat="server" id="guid" />
    <div class="container">
        <div class="title">
            <h2>Вкусы</h2>
            <p>Что вам по душе?</p>
        </div>
        <div class="styles" data-bind="foreach: pref">
            <div class="test-block" data-bind="click: $root.toggle">
                <input type="hidden" data-bind="value: $data.Id" />
                <div class="bigshadowtest">
                    <img alt="" src="img/bigshadow.png">
                </div>
                <div data-bind="css: $data.IsSelected == true ? 'txt-active' : 'txt'">
                    <h3 data-bind="text: $data.name"></h3>
                    <a href="#" class="button" data-bind="text: $data.IsSelected == true ? 'Добавлено' : 'Добавить'"></a>
                </div>
                <img alt="" data-bind="attr: { src: $root.img }">
            </div>
        </div>
        <table class="info" style="width: 100%; height: 100%;">
            <tr>
                <td style="text-align: center; vertical-align: middle;">
                    <a href="#" id="go" class="gobtn">Поехали!</a>
                </td>
            </tr>
        </table>
    </div>

附言：还有一个问题——我无法将observableArray self.img绑定到相应的img元素。