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)

который содержит идентификатор div для показа. Это свойство будет установлено соответственно той кнопке, по которой вы нажимаете.

Посмотреть модель:

$(document).ready(function () {
    var ViewModel = function(){
        var self = this;
        self.onClick =function(data, event) {
           var element = event.target.id.replace('button', 'text');
           self.shownElement(element)
        };
        self.shownElement =ko.observable(null);

    };

    ko.applyBindings(new ViewModel());
});

Посмотреть :

<div id="text1" class="text" data-bind="visible: shownElement() == 'text1'">Text 1</div>
<div id="text2" class="text" data-bind="visible: shownElement() == 'text2'">Text 2</div>
<div id="text3" class="text" data-bind="visible: shownElement() == 'text3'">Text 3</div>
<br>
<br>
<button id="button1" type="button" data-bind="click: onClick">Button 1</button>
<button id="button2" type="button" data-bind="click: onClick">Button 2</button>
<button id="button3" type="button" data-bind="click: onClick">Button 3</button>

Смотри скрипку

Я надеюсь, что это помогает.

template привязка с динамическим именем шаблона, например:

<div class="text" data-bind="template: { 'if': current, name: current() }"></div>
<button type="button" data-bind="click: toggle1">Button 1</button>
<button type="button" data-bind="click: toggle2">Button 2</button>
<button type="button" data-bind="click: toggle3">Button 3</button>

<script id="text1" type="text/html">text 1</script>
<script id="text2" type="text/html">text 2</script>
<script id="text3" type="text/html">text 3</script>

с моделью вида как:

var viewModel = {
    current: ko.observable(''),

    toggle1: function () {
        this.current("text1");
    },
    toggle2: function () {
        this.current("text2");
    },
    toggle3: function () {
        this.current("text3");
    },
};

ko.applyBindings(viewModel);

Образец здесь:http://jsfiddle.net/rniemeyer/Zh9Qy/

Обратите внимание, что в KO 2.3 вам не придется проходитьcurrent() дляname вариант и мог просто пройтиcurrent, так как теперь он будет правильно развернут.

Решение Вопроса

которая возвращает обработчик. Я нашел это'Это важный метод написания нормального кода Knockout.

основнойдемонстрация

Мы можем упростить HTML до этого. Проверяет что должно бытьshowing, наши кнопки изменить то, что есть.showing

<div id="text1" class="text" data-bind="if: showing() === '1'">Text 1</div>
<div id="text2" class="text" data-bind="if: showing() === '2'">Text 2</div>
<div id="text3" class="text" data-bind="if: showing() === '3'">Text 3</div>

<button id="button1" type="button" data-bind="click: show('1')">Button 1</button>
<button id="button2" type="button" data-bind="click: show('2')">Button 2</button>
<button id="button3" type="button" data-bind="click: show('3')">Button 3</button>

нашViewModel также упрощен. Во-первых, мы превращаем его в функцию для облегчения расширения. нашshowing это просто строковое значение.show это мясо нашего кода. Возвращает функцию, которая устанавливает.showing

Таким образом, мы могли бы переименовать элементы из12, а также3; чтобы,mainabout, а такжеcontact не касаясь JavaScript.

ViewModel = function(){
    var self = this;

    self.showing = ko.observable('');
    self.show = function(what) {
        return function(){ self.showing(what); };
    }
};
ko.applyBindings(new ViewModel);
Анимация переходадемонстрация

Использовать jQuerys скользить в / вниз, мы можем использоватькод предоставляется от KnockoutJS 'документация Это код JavaScript с удаленными комментариями:

ko.bindingHandlers.slideVisible = {
    update: function(element, valueAccessor, allBindingsAccessor) {
        var value = valueAccessor(), allBindings = allBindingsAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value); 
        var duration = allBindings.slideDuration || 400;
        if (valueUnwrapped == true) 
            $(element).slideDown(duration); // Make the element visible
        else
            $(element).slideUp(duration);   // Make the element invisible
    }
};

Чтобы вставить это в HTML, просто заменитеif связывание с.slideVisible

<div id="text1" class="text" data-bind="slideVisible: showing() === '1'">Text 1</div>
<div id="text2" class="text" data-bind="slideVisible: showing() === '2'">Text 2</div>
<div id="text3" class="text" data-bind="slideVisible: showing() === '3'">Text 3</div>
 Halcyon22 июн. 2013 г., 00:04
Это потрясающая демонстрация! Любые идеи о том, как использовать jQuery 's функции slideUp и slideDown в вашем ответе?
 Halcyon22 июн. 2013 г., 19:28
Это фантастика. Большое спасибо за помощь.
 Brigand22 июн. 2013 г., 00:23
@ Halcyon, я добавил скользящий переход.

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