2016-04-24 26 views
0

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

Antwort

1

Sie haben mehrere Pop-ups mit der gleichen ID - also jedes Mal wenn Sie ein Popup aufrufen, getElementByld wird immer auf die erste auf der Seite definiert beziehen.

Eine Möglichkeit, beheben konnte nur Ereignis in Ihrem ersten Beispiel verwenden, das innerhalb Click-Ereignis übergeben wird:

<div id="overlay" class="popup"></div> 
<div id="popup" class="popup-overlay"> 

und Ihre js, übergeben Sie in einem neuen Argument und verwenden es:

self.overlayImageOpen = function(camera, event) { 
    var overlay = event.target.parentNode.parentNode.parentNode.getElementsByClassName('popup-overlay')[0]; 
    var popup = event.target.parentNode.parentNode.getElementsByClassName('popup')[0]; 

    overlay.style.display = "block"; 
    popup.style.display = "block"; 
} 

Dies ist nicht ideal, Sie können auch ein Datenattribut in Ihrem Bild klicken, klicken Sie auf, dann übergeben Sie es an Popup.

Um es leistungsfähiger zu machen, würde ich nur eine einzige Vorlage verwenden, die Popup enthält, und dann einfach Daten an sie übergeben - wie das Bild selbst.Dann werden Sie nicht alle diese Duplikate haben, was die Renderzeit verlangsamt.

+0

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. –

+0

Wenn du denkst, dass das die Antwort ist, könntest du es als eine bitte markieren? – kasperoo

0

OK, habe ich dies funktioniert. Es geht nur um die Bindungen ... Also muss das OPEN das Bild (Kamera) als Parameter in das Javascript übergeben. Dies manipuliert dann den Popup-HTML-Code (ersetzt diesen) durch spezifische Verweise auf die Kamera, für die wir das Bild haben wollen.

Schließen des Bildes war ein bisschen schwierig, da es keine dynamische Bindung gibt (die ich bisher gefunden habe). und damit habe ich die ursprüngliche Bindung dafür beibehalten. Dann fügte ich eine ID = zu dem "A href" hinzu und ersetzte den inneren Code. Dies bedeutete, dass das Schließen korrekt an das Java-Skript gebunden werden konnte.

Dies ist einfacher im Code zu sehen.

HTML

<div data-bind="visible: favouritesArrayVisible"> 
      <div id="overlay"></div> 
<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="popup"> 
        <a href="#" data-bind="click: $parent.overlayImageClose" id="popupimage"> 
         <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> 

Javascript

 self.overlayImageOpen = function(camera) { 
     console.log('Yes overlayImageOpen >' + camera.fields.title.value +'<'); 
     var overlay = document.getElementById("overlay"); 
     var popup = document.getElementById("popup"); 

     var html = "<a href=\"#\" data-bind=\"click: $parent.overlayImageClose\">"; 
     html += "<img class=\"cameraPopup\" src=\"" + camera.fields.url.value + "\" " + "alt=\"" + camera.fields.title.value + "\" />"; 
     html += "<center>" + camera.fields.title.value + "</center>"; 
     html += "</a>"; 

     document.getElementById("popupimage").innerHTML = html; 

     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"; 
    } 

Ist es hässlich ... ja. Gibt es einen besseren Weg ... würde ich gerne wissen.

  • David
Verwandte Themen