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