Von einem Knockout beobachtete Array Ich präsentiere eine Liste von Bildern im Browserfenster. Wenn der Benutzer auf ein Bild klickt, möchte ich, dass das Bild für eine bessere Anzeige größer (größer) wird, und dann kann das Bild erneut angeklickt werden, um es zu schließen.Knockout JS - Klicken Sie auf das Bild im Array
Ich habe weitgehend funktioniert das ... aber. Das Popout-Fenster zeigt immer das erste Bild an.
HTML
<div data-bind="visible: favouritesArrayVisible">
<div class="panel-heading">
<h2 class="panel-title">Your favourites as cameras for display</h2>
</div>
<div data-bind="foreach: favouritesWithCamerasArray">
<div class="panel panel-wrapper" style="height=260px; width=%;">
<div class="panel-body" style="display:inline-block text-align:left;">
<a href="#" data-bind="click: $parent.overlayImageOpen">
<img class="camera" data-bind="attr : {src: fields.url.value}, {alt: fields.title.value}"/>
</a>
<div id="overlay"></div>
<div id="popup">
<a href="#" data-bind="click: $parent.overlayImageClose">
<img class="cameraPopup" data-bind="attr : {src: fields.url.value}, {alt: fields.title.value}"/>
<center><span data-bind="text: fields.title.value"></span></center>
</a>
</div>
<h4><span data-bind="text: fields.title.value"></span></h4>
<p><span data-bind="text: fields.url.value" style="word-wrap: break-word;"></span></p>
<div data-bind="if: fields.location.value">
<p><span data-bind="text: fields.location.value.longitude"></span>,<span data-bind="text: fields.location.value.latitude"></span></p>
</div>
<button data-bind="click: $parent.deleteFavouriteCameraByCamreaRecord" class="btn btn-primary pull-right">Delete Favourite</button>
</div>
</div>
</div>
Unterstützung JavaScript
self.overlayImageOpen = function(camera) {
console.log('Yes overlayImageOpen >' + camera.fields.title.value +'<');
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
}
self.overlayImageClose = function() {
console.log('Yes overlayImageClose');
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "none";
popup.style.display = "none";
}
Es ist wie overlayImageOpen und overlayImageClose sind auf das erste Element in dem Array gebunden. Ich denke, ich möchte, dass sie dynamisch gebunden sind oder so ähnlich ???
- David
Die Rückmeldung wird geschätzt. Ich hatte über die doppelten "Popups" herausgefunden - und natürlich wusste ich nicht, was ich mit ihnen machen sollte. Sieht so aus, als hätte ich eine Leistungsverbesserungsrunde unternommen. :-) Vielen Dank. –
Wenn du denkst, dass das die Antwort ist, könntest du es als eine bitte markieren? – kasperoo