javascript - 列表数据绑定(bind)上的 Bootstrap 弹出窗口

Question

我有一个元素列表，其中包含我在表中绑定(bind)的“类别”、“名称”和“值”等字段:

<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>'
        });

但是当我单击具有列表中的值的标签之一时，什么也没有发生。有没有办法在列表数据绑定(bind)字段上添加弹出窗口？

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();
  } 
};

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

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

我创建了一个JSFiddle example与绑定(bind)。请注意，这是一个非常基本的绑定(bind)。它为每个元素调用 $().popover() ，并且不会动态更新弹出窗口内容。所以还有改进的空间。