javascript - Knockout.js 显示/隐藏 block 可见性模式

Question

我在下一个案例中遇到了代码重复问题。在我的页面上，我有很多 block 需要通过单击链接来显示/隐藏:

<div>
    <a data-bind="click: showHiddenFirst, visible: isVisibleFirst"href="#">Show first</a>
    <div data-bind="visible: !isVisibleFirst()" style="display:none">
        hidden content first
    </div>
</div>
<div>
    <a data-bind="click: showHiddenSecond, visible: isVisibleSecond"href="#">Show second</a>
    <div data-bind="visible: !isVisibleSecond()" style="display:none">
        hidden content second
    </div>
</div>

还有我的JS

var vm = function(){
    this.isVisibleFirst = ko.observable(true);

    this.showHiddenFirst = function(){
        this.isVisibleFirst(false)
    };

    this.isVisibleSecond = ko.observable(true);

    this.showHiddenSecond = function(){
        this.isVisibleSecond(false)
    };
};

ko.applyBindings(new vm());

这是 jsfiddle 示例 http://jsfiddle.net/sstude/brCT9/2/

问题是如何避免所有这些显示/可见的重复？也许我需要一些自定义绑定(bind)，我可以在其中放置隐藏 block 或 smth 的 ID。别的？您可以建议任何模式吗？

Answer 1

这是针对您的特定场景将此功能完全封装在可观察对象中的想法:

ko.bindingHandlers.clickVisible = {
    init: function(element) {
       var visible = ko.observable(true),
           opposite = ko.computed(function() { return !visible(); }),
           clickHandler = visible.bind(null, false);

        //apply bindings to anchor
        ko.applyBindingsToNode(element, { click: clickHandler, visible: visible });

        var sibling = element.nextSibling;
        //find the div (as text nodes, etc. will show up in nextSibling)
        while (sibling && sibling.nodeType != 1) {
            sibling = sibling.nextSibling;   
        }        

        //apply bindings to div
        if (sibling) {
            ko.applyBindingsToNode(sibling, { visible: opposite });
        }
    }
};

如果传递给绑定(bind)的值可能很重要，可以根据需要进一步调整。

示例:http://jsfiddle.net/rniemeyer/gCgy5/