javascript - Knockout.js:使用多个按钮切换多个 Dom 元素的可见性

Question

我有一个 js fiddle (located here)，我想使用 knockout.js 来模仿它。这个想法是每个按钮都有一个相应的 div 标签。如果相应的 div 标签可见，它应该在单击按钮时隐藏。否则，它应该显示。如果任何其他不对应的 div 可见，它们应该隐藏然后显示相应的 div。我如何使用 knockout 模仿这个 jQuery 版本？knockout 版本的 js fiddle 是 located here .它有效，但它看起来仍然很冗长。似乎应该有一种方法可以让它更动态并减少工作量。非常感谢任何帮助。

<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>

Answer 1

您可以使用带有动态模板名称的 template 绑定(bind)，例如:

<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>

像这样的 View 模型:

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，因为它现在将被正确打开。