js:使用多个按钮切换多个Dom元素的可见性
Knockout.js: Toggling Visibility Of Multiple Dom Elements Using Multiple Buttons
我有一个js小提琴(位于这里),我想模仿使用knockout.js。其思想是每个按钮都有一个相应的div标记。如果相应的div标签是可见的,那么当单击按钮时,它应该隐藏起来。否则,它应该显示出来。如果任何其他非对应的div是可见的,他们应该隐藏,然后显示相应的div。我如何模仿这个jQuery版本使用knockout?knockout版本的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="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>
您可以将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中,您不必为name
选项传递current()
,而只需传递current
,因为它现在将被正确地打开。
我建议使用返回处理程序的函数。我发现这是编写合理的Knockout代码的基本方法。
<标题>基本h1>我们可以把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
的函数。
这样,我们可以重命名1
、2
和3
中的元素;到main
, about
和contact
,而不触及JavaScript。
ViewModel = function(){
var self = this;
self.showing = ko.observable('');
self.show = function(what) {
return function(){ self.showing(what); };
}
};
ko.applyBindings(new ViewModel);
<标题>过渡动画演示要使用jQuery的滑动,我们可以使用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>
标题>标题>
您可以创建一个包含要显示的div id的viewModel。此属性将根据您单击的按钮进行设置。
视图模型:
$(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>
看到小提琴
- 如何在DOM元素上按类型构建此函数
- DOM元素和angular元素之间的主要区别是什么
- 当带有渲染器的DOM元素不在屏幕顶部时,移动了场景的坐标
- 使用jquery创建dom元素会导致ie9出现拒绝访问错误
- 如何在使用Ractive.extend()时引用DOM元素
- 在d3中向DOM元素添加了图像,但现在它赢得了't过渡
- 如何'剪切'DOM元素并将其显示在其他位置
- 转换<a>使用jQuery将文本字符串转换为dom元素
- d3在数据更新时错误地附加了dom元素
- 访问VueJS中的DOM元素
- 在Meteor中如何查找DOM元素(渲染后)
- IE9-添加和删除DOM元素会破坏父keydown事件
- 未捕获错误:元素缓存中id为x的DOM元素与DOM中的元素不同
- 在 ng-if 编译后访问指令中的 DOM 元素
- spin.js/angular spinner:如何将spin定位到DOM元素中(包括plunker演示)
- 如何在dom元素中插入输入标记数据插件
- Mobile Safari、jQuery以及绑定到未来的DOM元素
- 从字符串创建dom元素时添加多个类
- 如何根据客户端的屏幕大小使用javascript更改DOM元素
- 为onClick-hander插入临时DOM元素