Knockout.js：使用多个按钮切换多个Dom元素的可见性 [英] Knockout.js: Toggling Visibility Of Multiple Dom Elements Using Multiple Buttons
问题描述
我有一个js小提琴（位于这里），我想用knockout.js来模仿。这个想法是，每个按钮都有一个相应的div标签。如果相应的div标签是可见的，它应该在按钮被点击时隐藏。否则，它应该显示。如果其他任何非对应的div都可见，则应隐藏并显示相应的div。我如何使用knockout模仿这个jQuery版本？淘汰赛版本的js小提琴是位于此处。它可以工作，但它看起来仍然很冗长。似乎应该有办法让它更具活力，并减少工作量。任何帮助都非常感谢。
< 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 =text1class =textdata-bind =if：showHide1> Text 1< / div>
< div id =text2class =textdata-bind =if：showHide2> Text 2< / div>
< div id =text3class =textdata-bind =if：showHide3> Text 3< / div>
< br />
< br />
< button id =button1type =buttondata-bind =click：toggle1> Button 1< / button>
< button id =button2type =buttondata-bind =click：toggle2> Button 2< / button>
< button id =button3type =buttondata-bind =click：toggle3> Button 3< / button>
我建议使用返回处理程序的函数。
基本
demo
我们可以简化HTML。它会检查显示的内容，我们的按钮会更改显示的。
< div id =text1class =textdata-bind =if：showing（）==='1'> Text 1< / DIV>
< div id =text3class =textdata-bind =if：showing（）==='3'> Text 3< / div>
< button id =button1type =buttondata-bind =click：show（'1'）> Button 1< / button>
< button id =button2type =buttondata-bind =click：show（'2'）> Button 2< / button>
< button id =button3type =buttondata-bind =click：show（'3'）> Button 3< / button>
我们的 ViewModel 也被简化了。首先，我们把它变成一个函数，以便更易于扩展。我们的显示只是一个字符串值。 show 是我们的代码。它返回一个函数，设置显示。
通过这种方式，我们可以重命名元素 1 ， 2 和 3 ;至主要，大约和联系人，而无需触摸JavaScript 。
ViewModel = function（）{
var self = this;
self.showing = ko.observable（''）;
self.show = function（what）{
return function（）{self.showing（what）; };
}
};
ko.applyBindings（new ViewModel）;
过渡动画
demo
要使用jQuery的幻灯片in / down，我们可以使用
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）; //使元素可见
else
$（element）.slideUp（duration）; //使元素不可见
}
};
要将这个放入HTML中，只需替换 if $ b pre $ < div id =$ c $>绑定到 slideVisible 。
< div id =text2class =textdata-bind =slideVisible：showing（）==='2'> Text 2< / div>
< div id =text3class =textdata-bind =slideVisible：showing（）==='3'> Text 3< / div>
I have a js fiddle (located here) that I want to mimic using knockout.js. The idea is that each button has a corresponding div tag. If the corresponding div tag is visible, it should hide when the button is clicked. Otherwise, it should show. If any of the other non-corresponding divs are visible, they should hide and then show the corresponding div. How can I mimic this jQuery version using knockout? The js fiddle for the knockout version is located here. It works but it still seems really verbose. It seems like there should be a way to make it more dynamic and reduce the amount of work. Any help is greatly appreciated.
<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>
I propose using a function that returns the handler. I find it's an essential method to writing sane Knockout code.
Basic
demo
We can simplify the HTML to this. It checks what should be showing, has our buttons change what is 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>
Our ViewModel is also simplified. First, we turn it into a function, for easier extensiblity. Our showing is simply a string value. show is the meat of our code. It returns a function that sets showing.
This way, we could rename the elements from 1, 2, and 3; to main, about, and contact without touching the JavaScript.
ViewModel = function(){
var self = this;
self.showing = ko.observable('');
self.show = function(what) {
return function(){ self.showing(what); };
}
};
ko.applyBindings(new ViewModel);
Transition Animation
demo
To use jQuery's slide in/down we can use code provided by KnockoutJS's documentation. This is the JavaScript code with comments removed:
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
}
};
To put this into the HTML, simply replace the if binding with 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>
这篇关于Knockout.js：使用多个按钮切换多个Dom元素的可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
