列表数据绑定上的Bootstrap popover

Question

我有一个元素列表，其中的字段包括＆＃39;类别＆＃39;，＆＃39;名称＆＃39;和＆＃39;价值＆＃39;我在表格中绑定：

<table class="table" data-bind="visible: document.pvm.tehnicalTab().length > 0">
   <thead>
      <tr>
         <td>Category</td>
         <td>Name[86, 0]</td>
         <td>Value[439, 0]</td>
      </tr>
   </thead>
   <tbody data-bind="foreach: elemList()">
      <tr>
         <td data-bind="text: $data.Category"></td>
         <td data-bind="text: $data.Name"></td>
         <td data-bind="text: $data.Value"></td>
      </tr>
   </tbody>

我试图为每个值字段添加一个弹出窗口，该字段将显示一个带有随机数的邮件。

我补充说：

 <div data-bind='component: "tehnical-val"'></div>

在Value字段中：

<td data-bind="text: $data.Value">
   <div data-bind='component: "tehnical-val"'></div>
</td>

和它的javascript：

    ko.components.register('tehnical-val', {
template: '<a href="#" data-toggle="popover" data-trigger="focus" data-html="true" data-placement="right" container="body" tabindex="0" data-contentwrapper=".cartContent" data-original-title="" title="">' +
    'VID=7' + '</a>'
        });

但是当我点击其中一个带有列表值的标签时，没有任何事情发生。 有没有办法在列表数据绑定字段上添加弹出窗口？

Answer 1

我建议创建一个custom binding来调用元素上的$().popover()函数。 e.g。

ko.bindingHandlers.bootstrapPopover = {
  init: function(element, valueAccessor) {
    var $el = $(element);
    $el.attr('data-toggle', 'popover');
    $el.attr('data-trigger', 'hover');
    $el.attr('data-html', 'true');
    $el.attr('data-placement', 'left');
    $el.attr('data-content', ko.unwrap(valueAccessor()));
    $el.popover();
  } 
};

然后将绑定添加到元素，例如

<div data-bind="text: $data.value, bootstrapPopover: $data.popoverContent"></div>

我已经使用绑定创建了JSFiddle example。请注意，这是一个非常基本的绑定。它为每个元素调用$（）。popover（），并且它不会动态更新弹出窗口内容。所以还有改进的余地。