Question

我有一段绑定到淘汰赛foreach循环的HTML代码。在这个片段的内部，我有一个glyphicon，我想用它来触发弹出窗口，其中包含一些用户可以调整的自定义设置。以下是代码段：

withAuthorized

我可以在foreach循环外部的代码中手动放置多个这些glyphicon锚点，并且popovers工作得很好。他们只是没有在淘汰赛的约束中工作......

是否有人知道我需要做些什么来使弹出窗口适用于淘汰赛foreach循环中包含的项目？任何关于我可能做错的建议或指示都将不胜感激。

更新1：

因此，在回顾了Buzinas的答案并进一步研究该问题之后，事实证明问题似乎是<ul class="nav navbar-nav" data-bind="foreach: items"> <li> <div> <a data-bind="attr:{id: itemId}" role="button" data-toggle="popover" title="Config Options" data-content="test content" data-placement="auto right"> <span class="glyphicon glyphicon-cog"></span> </a> </div> </li> </ul>是items初始化为空的事实。根据用户选择填充此数组。当我在初始化时默认向数组添加项目时，那些popovers工作。唯一不起作用的是用户即时添加的那些。对此的任何想法也将不胜感激。

Answer 1

我不知道在不使用KO时它是如何为你工作的，因为Bootstrap documentation说：

选择加入功能

出于性能原因，Tooltip和Popover data-apis是选择加入的，   意思是你必须自己初始化它们。

初始化页面上所有弹出窗口的一种方法是选择它们   通过他们的数据切换属性：
$(function () {
   $('[data-toggle="popover"]').popover()
 });

然后，我尝试与KO结合使用，一切正常：

＆＃13;

function AppViewModel() {
  var self = this;
  
  self.items = ko.observableArray([
    { itemId: 'id1' },
    { itemId: 'id2' },
    { itemId: 'id3' }
  ]);
  
  self.add = function() {
    self.items.push({ itemId: 'id' + self.items.length });
  }
}

ko.bindingHandlers.popover = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
      $(element).popover();
    }
};

ko.applyBindings(new AppViewModel());

＆＃13;

li {
  margin-left: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<ul class="nav navbar-nav" data-bind="foreach: items">
  <li>
    <div>
      <a data-bind="attr:{id: itemId}, popover" role="button" data-toggle="popover" title="Config Options" data-content="test content" data-placement="auto right">
        <span class="glyphicon glyphicon-cog"></span>
      </a>
    </div>
  </li>
</ul>
<button data-bind="click: add">Add</button>

＆＃13;

更新

由于只有在需要添加新项目时才遇到问题，因此可以创建Custom Binding，并为您创建一个名为popover的文章：

ko.bindingHandlers.popover = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
      $(element).popover();
    }
};

然后，您可以像这样使用它：

<a data-bind="popover">My anchor</a>

在Knockout foreach绑定中的Boostrap popovers

1 个答案:

选择加入功能

更新