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

Question

我有一个元素列表，其中包含我在 table 中绑定的 'Category'、'Name' 和 'Value' 等字段：

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

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

Bootstrap popover on list data-bind

javascript

bootstrapping

knockout.js