javascript - Knockout JS - 单击数组中的图像

Question

从 knockout 观察数组中，我在浏览器窗口中呈现图像列表。当用户单击图像时，我希望图像弹出(更大)以便更好地查看，然后可以再次单击图像以关闭。

我基本上已经完成了这个工作......但是。弹出窗口始终显示第一张图像。

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绑定(bind)到数组中的第一项。我想我希望它们动态绑定(bind)或类似的东西？？？

• 大卫

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

这并不理想，您还可以在图像点击中传递数据属性，然后将其传递给弹出窗口。

为了提高性能，我只需使用一个包含弹出窗口的模板，然后将数据传递给它 - 例如图像本身。这样您就不会出现所有重复，这会减慢渲染时间。