Mam skrzypce js (znajduje się tutaj) które chcę naśladować za pomocą knockout.js. Chodzi o to, że każdy przycisk ma odpowiedni znacznik div. Jeśli odpowiedni znacznik div jest widoczny, powinien się ukryć po kliknięciu przycisku. W przeciwnym razie powinien się pokazać. Jeśli którykolwiek z pozostałych nie odpowiadających div jest widoczny, powinien się ukryć, a następnie pokazać odpowiedni div. Jak mogę naśladować tę wersję jQuery za pomocą nokautu? Skrzypce js dla wersji znokautowanej toznajduje się tutaj. Działa, ale nadal wydaje się być bardzo gadatliwy. Wygląda na to, że powinien istnieć sposób na zwiększenie jego dynamiki i zmniejszenie ilości pracy. Każda pomoc jest bardzo mile widziana.

<style type="text/css">
    .text { background-color: lightgray; }
</style>

<script type="text/javascript">
    $(document).ready(function () {
        var viewModel = {
            showHide1: ko.observable(false),
            showHide2: ko.observable(false),
            showHide3: ko.observable(false),
            toggle1: function () {
                this.showHide1(true);
                this.showHide2(false);
                this.showHide3(false);
            },
            toggle2: function () {
                this.showHide1(false);
                this.showHide2(true);
                this.showHide3(false);
            },
            toggle3: function () {
                this.showHide1(false);
                this.showHide2(false);
                this.showHide3(true);
            }
        };

        ko.applyBindings(viewModel);
    });
</script>

<div id="text1" class="text" data-bind="if: showHide1">Text 1</div>
<div id="text2" class="text" data-bind="if: showHide2">Text 2</div>
<div id="text3" class="text" data-bind="if: showHide3">Text 3</div>
<br />
<br />
<button id="button1" type="button" data-bind="click: toggle1">Button 1</button>
<button id="button2" type="button" data-bind="click: toggle2">Button 2</button>
<button id="button3" type="button" data-bind="click: toggle3">Button 3</button>