如何使用 bootstrap popover with chosen？

Question

在带有 Meteor 的弹出窗口中使用 Chosen 的最佳方法是什么？

我有一个日历，当我单击事件时，会打开一个带有小窗体的弹出窗口来更新事件。

这是我的模板日历：

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

  {{> bookingCalendar_popover}}
</template>

我的弹出框模板：

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

我在

中打开弹出窗口

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

未选择 select 已正确填写。但是当我使用 chosen 时，select 坏了。

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

Answer 1

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

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

如何使用 bootstrap popover with chosen？

How to use bootstrap popover with chosen?

twitter-bootstrap

jquery-chosen

meteor