ノックアウトJS - 配列の画像をクリック

Question

ノックアウト観測配列から、私はブラウザウィンドウに画像のリストを提示しています。ユーザーが画像をクリックすると、より見やすくするために画像を拡大（拡大）してから、画像をもう一度クリックして閉じることができます。

私は主にこの作業をしています...しかし。ポップアウトウィンドウには常に最初の画像が表示されます。

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

それはoverlayImageOpenようなものだと配列の最初の項目にoverlayImageCloseバインドされているJavaScriptの

支える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> 

。私はそれらが動的にバインドされているか、そのようなものにしたいと思いますか？

• デビッド

Answer 1

あなたは、同じIDを持つ複数のポップアップを持っている - ので、毎回使用すると、1つのポップアップを呼び出し、getElementByIdを、常にページ上で定義された最初のものを指します。

解決する一つの方法は、ちょうどあなたの最初の例では、イベントを使用することができ、それはクリックイベント内で渡された：

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

とあなたのJS、新しい引数を渡すと、それを使用します。

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

これは理想的ではありません。画像のクリックでデータ属性を渡して、ポップアップに渡すこともできます。

パフォーマンスを向上させるには、ポップアップを含む単一のテンプレートを使用してから、画像そのものなどのデータを渡すだけです。そうすれば、その重複はすべてなくなり、レンダリング時間が遅くなります。

Answer 2

OK、私はこれが動作するようになりました。バインディングに関するすべてです... OPENは、画像（カメラ）をパラメータとしてJavascriptに渡す必要があります。これはポップアップのhtmlコードを操作して（イメージを置き換える）、イメージを必要とするカメラへの特定の参照に置き換えます。

画像を閉じることは、（私がこれまでに見つけた）動的バインディングがないので少しトリッキーでした。私はそれのために元のバインディングをそのまま残しました。次に、ID =を「A href」に追加し、内部コードを置き換えました。これは、クローズがJavaスクリプトに正しく戻されることを意味していました。

これはコード内で見るのが簡単です。

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

それは醜いです...はい。 良い方法がありますか...知りたいです。

• デビッド