テンプレートでKnockout JSを使用して折りたたみパネルを作成する

Question

折りたたみパネル機能をノックアウトテンプレートに追加しようとしています。

基本的には、クリックして画像URLを切り替えると（「プラス」または「マイナス」アイコンを表示する）、次のdivの表示を切り替えます。

（私は願って必要なバインディングを持つ）私のテンプレートは以下の通りです：

{{each $data}} 
<div id="wrapper" class="option-wrapper group show"> 
    <div class="option-head group"> 
    <img data-bind="click: showDescription attr: { href: url }> 
     <h3 data-bind="text: Name"></h3> 
     <select class="option-select" data-bind="options: Values, optionsText: 'value', optionsValue: 'key', value: Selected" /> 
    </div> 
    <div class="option-description" data-bind="visible: showDescription html: Description"></div> 
</div> 
{{/each}} 

私はのviewmodelに取り組む方法がわからないだけです。どんな助けでも大歓迎です。

Answer 1

大丈夫です。最初のオプション：実際にパネルを制御するノックアウトと、パネルを開閉する必要がありますか？そうでない場合は、ノックアウトを使ってコンテンツをレンダリングし、パネルの開閉を処理するためにjQueryアコーディオンのようなものを使用することを検討することができます。次の行を追加します。

（私は<span>に<img>変更されているかに注目してください）

{{each $data}} 
<div id="wrapper" class="option-wrapper group show"> 
    <div class="option-head group"> 
     <span data-bind="click: toggleDescription, css: { 'isOpen': showDescription, 'isClosed': !showDescription() }"></span> 
     <h3 data-bind="text: Name"></h3> 
     <select class="option-select" data-bind="options: Values, optionsText: 'value', optionsValue: 'key', value: Selected" /> 
    </div> 
    <div class="option-description" data-bind="visible: showDescription, html: Description"></div> 
</div> 
{{/each}} 

：それはあなたのシナリオでは動作しない場合

しかし、私はの線に沿って何かをするだろうあなたのビューモデルの機能：

toggleDescription: function() { 
    viewModel.showDescription(!viewModel.showDescription()); 
} 

そしてスパンのCSSスタイルを定義します。

.isOpen{ background-image: url(../images/open.gif); } 
.isClosed { background-image: url(../images/closed.gif); } 

私はここで私の頭の上からコーディングしていますが、うまくいけば、進める方法の要点を与えるはずです。