DOM要素に対するKnockout.jsのポップアップ

Question

ノックアウトjsを使用してポップアップを作成しようとしています。しかし、私はdom要素に比べてポップアップを得ることができません。 私は2つの解決策があることを知っています 1）特定のIDに設定する$ index。 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

あなたはポップオーバーのブートストラップのバージョンを使用していると仮定すると：

私は問題があなたの焦点ベースのトリガーであると思います。画像要素はデフォルトではフォーカスできません。ポップオーバーの位置については、既にそれが付属している要素に相対的でなければならないので、何もする必要はありません。

トリガータイプを変更した後は、期待通りに機能するようです。

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

https://jsfiddle.net/3s2h7gz3/

あなたはそれにtabindex属性を与えることができますフォーカス可能な画像要素を作ることを好むと思います。

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