列表数据绑定上的引导弹出窗口

Question

我有一个包含“类别”、“名称”和“值”等字段的元素列表，我将它们绑定在一个表中：

<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>

在值字段内：

<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() 函数。例如

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() 并且它不会动态更新弹出内容。所以还有改进的余地。