0

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

基本的に、ヘッダー div に画像を追加します。クリックすると、画像の 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}}

ビューモデルに取り組む方法がわかりません。どんな助けでも大歓迎です。

4

1 に答える 1

0

わかった。最初のオプション: パネルを制御し、パネルが開いているか閉じているかを制御するために本当にノックアウトが必要ですか? そうでない場合は、ノックアウトを使用してコンテンツをレンダリングし、jQuery アコーディオンなどを使用してパネルの開閉を処理することを検討できます。

ただし、それがあなたのシナリオでうまくいかない場合は、次のようにします。

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

( を に変更したことに注意して<img>ください<span>)

次の関数をビュー モデルに追加します。

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

次に、スパンの CSS スタイルを定義します。

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

私はここで頭のてっぺんからコーディングしていますが、うまくいけば、続行する方法の要点が得られるはずです。

于 2012-04-10T14:51:01.180 に答える