如何使用选择的bootstrap popover？

Question

使用Meteor在popover中使用Chosen的最佳方法是什么？

我有一个日历，当我点击事件时，会打开一个带有小表格的popover来更新事件。

这是我的模板日历：

<template name="bookingCalendar">
  <section>
    <div class="col-md-12">
      <div id="calendarMain"></div>
    </div>
  </section>

  {{> bookingCalendar_popover}}
</template>

我的popover模板：

<template name="bookingCalendar_popover">
  <div id="bookingCalendar_popover" style="display: none">
    <form class="form-horizontal" role="form">
      <div class="col-md-12 col-lg-6">
        {{> objectIndividual_edit id = 'individual' label = 'Patient'}}
      </div>
    </form>
  </div>
</template>

我的目标：

<template name="objectIndividual_edit">
  <div class="objectRow">
    {{> objectLabel label=label id=id}}
    <div class="objectEdit">
      <select id="{{id}}" name="{{id}}" class="form-control objectIndividual">
        <option value="0"></option>
        {{#each individuals}}
          <option value="{{_id}}">{{firstName}} {{lastName}}</option>
        {{/each}}
      </select>
    </div>
  </div>
</template>

我在

中打开我的popover

Template.bookingCalendar.rendered

我在这里选择初始化。

Template.objectIndividual_edit.rendered = function() {
  var input = $('.objectIndividual');
  input.chosen({disable_search_threshold: 10});
};

Template.objectIndividual_edit.helpers({
  individuals: function(){
    return Individual.find({deactivatedAt: {$exists: false}}, {sort: {firstName: 1, lastName: 1}});
  }
});

未选择正确填充选择。但是当我选择使用时，选择就会被打破。

那么，有人有想法或做一个例子吗？

Answer 1

与chosen with bootstrap 3 not working properly类似，在内容准备好后需要初始化所选行为。与模态事件类似，您可以使用popover事件：

$('#thing').popover(
  // content, title, etc...
).on('shown.bs.popover', function () {
  $('.chosen-select').chosen();
}).on('hidden.bs.popover', function () {
  // Destroy when the popover is hidden otherwise it does not work if the popover is re-opened. 
  $('.chosen-select').chosen('destroy');
});