我正在尝试使用 knockout js制作一个弹出窗口。但我无法获得与我的 dom 元素相关的弹出窗口。 我知道有两种解决方案 1) $index 设置为特定的 id。 2)你也可以通过knockout获取当前的dom元素,不要使用$index。
但是我无法使用上述任何解决方案。 任何人都有一个解决方案,如何为每个 foreach 并相对于当前图像提供如下图所示的弹出窗口。
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>
最佳答案
假设您使用的是 Bootstrap 版本的弹出窗口:
我认为问题出在你基于焦点的触发器上。默认情况下,图像元素不可聚焦。至于弹出框的位置,它应该已经相对于它所附加的元素,因此您不需要做任何花哨的事情。
更改触发器类型后,它似乎按我的预期工作。
$(element).popover({
trigger: 'hover',
content: valueAccessor(),
title: sourceUnwrapped
});
https://jsfiddle.net/3s2h7gz3/
如果您希望使图像元素可聚焦,您可以为其指定 tabindex。
<img tabindex="0" type="button" ...
关于javascript - Knockout.js 中相对于 DOM 元素的弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44575172/