Erstellen von reduzierbaren Panels mit Knockout JS in einer Vorlage

Question

Ich versuche, kollabierbare Panel-Funktionalität zu meiner Knockout-Vorlage hinzuzufügen.

Grundsätzlich möchte ich ein Bild zum Header div hinzufügen, das beim Anklicken die Bild-URL umschaltet (um ein "Plus" - oder "Minus" -Symbol anzuzeigen) und die Sichtbarkeit des folgenden div.

Meine Vorlage (mit den erforderlichen Bindungen hoffe ich) ist unten:

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

Ich bin nur nicht sicher, wie das Viewmodel zu bewältigen. Jede Hilfe würde sehr geschätzt werden.

Answer 1

Okay. Erste Option: Brauchen Sie wirklich Knockout, um die Panels zu kontrollieren und ob sie geöffnet oder geschlossen sind? Wenn nicht, könnten Sie in Erwägung ziehen, den Inhalt nur mit knockout zu rendern und dann mit etwas wie dem jQuery-Akkordeon die öffnenden und schließenden Panels zu bearbeiten.

Wenn dies jedoch nicht in Ihrem Szenario funktioniert, würde ich etwas entlang der Linien von tun:

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

(Beachten Sie, wie ich die <img> zu einem <span> geändert haben)

Fügen Sie den folgenden Funktion zu Ihrer Ansicht Modell:

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

Und dann die CSS-Stile für die Spanne definieren:

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

Ich kodiere hier oben auf dem Kopf, aber hoffentlich sollte das den Kern des weiteren Vorgehens geben.