Knockout JS - 单击排列图像

Question

从基因敲除观察数组中，我在浏览器窗口中显示图像列表。当用户点击图像时，我希望图像弹出（更大）以便更好地观看，然后可以再次点击该图像以解散。

我已经在很大程度上得到了这个工作... BUT。弹出窗口始终显示第一个图像。

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> 

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

这就像overlayImageOpen和overlayImageClose绑定到阵列中的第一项。我想我希望他们被动态绑定或类似的东西？

• 大卫

Answer 1

你有相同的ID多个弹出窗口 - 因此每次你调用一个弹出式窗口，将的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”并替换了内部代码。这意味着close可以正确地绑定回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"; 
    } 

是丑陋......是的。 有没有更好的方法...我很想知道。

• 大卫