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

Question

我正在尝试使用 knockout js 制作弹出窗口。但是我无法获得与我的 dom 元素相关的弹出窗口。我知道有两种解决方案 1) $index 设置为特定的id。 2) 你也可以通过敲除获得当前的 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 版本的弹出窗口：

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

更改触发器类型后，它似乎可以正常工作。

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

https://jsfiddle.net/3s2h7gz3/

如果您希望使图像元素可聚焦，您可以给它一个 tabindex。

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

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

Popup in Knockout.js relative to DOM element

javascript

dom

knockout-mapping-plugin

knockout-2.0

knockout.js