Popup dans Knockout.js par rapport à l'élément DOM

Question

J'essaie de faire un popup en utilisant le knockout js. Mais je ne suis pas capable d'obtenir un popup par rapport à mon élément dom. Je sais qu'il existe deux solutions 1) $ index pour définir à id spécifique. 2) Vous pouvez aussi obtenir l'élément dom par KO aussi et n'utilisez pas $ index.

Mais je suis incapable d'utiliser l'une des solutions ci-dessus. Tout le monde a une solution comment puis-je avoir une popup comme l'image ci-dessous pour chaque foreach et par rapport à l'image actuelle.

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

En supposant que vous utilisez la version Bootstrap de popover:

Je pense que le problème est avec votre déclencheur en fonction de mise au point. Les éléments d'image ne sont pas activables par défaut. En ce qui concerne la position du popover, il devrait déjà par rapport à l'élément auquel il est attaché donc vous ne devriez pas avoir besoin de faire quelque chose de fantaisie. Après avoir changé le type de déclencheur, il semble fonctionner comme je l'avais prévu.

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

https://jsfiddle.net/3s2h7gz3/

Si vous préférez faire l'élément d'image focusable vous pouvez lui donner un tabindex.

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