Knockout.js: переключение видимости нескольких элементов Dom с использованием нескольких кнопок

У меня есть js скрипка (находится здесь) что я хочу имитировать с помощью knockout.js. Идея состоит в том, что каждая кнопка имеет соответствующий тег div. Если соответствующий тег div виден, он должен скрываться при нажатии кнопки. В противном случае, это должно показать. Если какие-либо другие несоответствующие элементы div являются видимыми, они должны скрыться и затем показать соответствующий элемент div. Как я могу имитировать эту версию JQuery с помощью нокаута? Js Fiddle для нокаут-версиинаходится здесь, Это работает, но все еще кажется действительно многословным. Кажется, должен быть способ сделать его более динамичным и сократить объем работы. Любая помощь очень ценится.


    .text { background-color: lightgray; }



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


Text 1
Text 2
Text 3
<br>
<br>
Button 1
Button 2
Button 3

Ответы на вопрос(3)

Ваш ответ на вопрос