javascript - Knockout.js 中相对于 DOM 元素的弹出窗口

Question

我正在尝试使用 knockout js制作一个弹出窗口。但我无法获得与我的 dom 元素相关的弹出窗口。我知道有两种解决方案1) $index 设置为特定的 id。2)你也可以通过knockout获取当前的dom元素，不要使用$index。

但是我无法使用上述任何解决方案。任何人都有一个解决方案，如何为每个 foreach 并相对于当前图像提供如下图所示的弹出窗口。

Popup Template

ko.bindingHandlers.popover = {

 init: function(element, valueAccessor, allBindings, viewModel, bindingContext)
 {
    ko.bindingHandlers.value.init(element, valueAccessor, allBindings);
    var source = allBindings.get('popoverTitle');
    var sourceUnwrapped = ko.unwrap(source);
    $(element).attr('data-placement', 'bottom');
    $(element).popover({
      trigger: 'focus',
      content: valueAccessor(),
      title: sourceUnwrapped
    });
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    var value = valueAccessor();
    ko.bindingHandlers.value.update(element, valueAccessor);
  }
};

<div data-bind="foreach : list">
  <div class="col-lg-3 col-md-4 col-xs-6 thumb" >
     <a class="thumbnail ind" href="#">
      <img type="button" class="img-responsive" data-lightbox="" src="http://placehold.it/400x300" alt="" data-toggle="popover" data-bind="popover:" >
      </a>
  </div>

Answer 1

假设您使用的是 Bootstrap 版本的弹出窗口:

我认为问题出在你基于焦点的触发器上。默认情况下，图像元素不可聚焦。至于弹出框的位置，它应该已经相对于它所附加的元素，因此您不需要做任何花哨的事情。

更改触发器类型后，它似乎按我的预期工作。

$(element).popover({
  trigger: 'hover',
  content: valueAccessor(),
  title: sourceUnwrapped
});

https://jsfiddle.net/3s2h7gz3/

如果您希望使图像元素可聚焦，您可以为其指定 tabindex。

<img tabindex="0" type="button" ...