7

次のケースでは、コードの重複の問題があります。私のページには、リンクをクリックして表示/非表示にする必要があるブロックがたくさんあります。

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

問題は、このすべての表示/可視重複を回避する方法です。たぶん、隠しブロックまたはsmthのIDを配置するカスタムバインディングが必要です。そうしないと？提案できるパターンはありますか？

4

3 に答える 3

4

この機能を特定のシナリオのオブザーバブルに完全にカプセル化するという考えがありました。

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 });
        }
    }
};

バインディングに渡される値が重要な場合は、必要に応じてさらに微調整できます。

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

于 2013-02-20T04:18:02.800 に答える
1

いくつかのID（チェックボックスごとに1つ）でobservableArrayを使用してみませんか？

次に、次のようなメソッドを使用できます。

model hideElement = function(id) {
  model.hiddenElements.push(id);
}

model.showElement = function(id) {
  model.hiddenElements.remove(id);
}

そしてあなたのバインディングで：

<div data-bind="click: function() { hideElement('two') }, visible: !hiddenElements().contains('one')"></div>

編集：可能な実装を示すためにフィドルを更新しました：http：//jsfiddle.net/brCT9/4/

于 2013-02-18T09:15:36.987 に答える