3

ノックアウト.jsを使用して模倣したいjsフィドル(ここにあります)があります。各ボタンには対応する div タグがあるという考え方です。対応する div タグが表示されている場合は、ボタンをクリックすると非表示になります。それ以外の場合は、表示されるはずです。他の対応しない div が表示されている場合は、非表示にしてから対応する div を表示する必要があります。ノックアウトを使用してこの 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="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>
4

3 に答える 3

3

ハンドラーを返す関数を使用することを提案します。これは、健全な Knockout コードを記述するための不可欠な方法であることがわかりました。

基本

デモ

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も単純化されています。まず、拡張性を容易にするために、関数に変換します。Ourshowingは単なる文字列値です。 show私たちのコードの要です。を設定する関数を返しますshowing。

このようにして、要素の名前を1、2、および3;から変更できます。、main、aboutおよびcontactJavaScript に触れずに。

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>
于 2013-06-21T21:52:42.477 に答える