如何使用选择的引导弹出窗口？答案

【问题标题】：How to use bootstrap popover with chosen?如何使用选择的引导弹出窗口？
【发布时间】：2015-04-21 02:38:57
【问题描述】：

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

如果没有选择，则选择正确填充。但是当我使用 selected 时，选择会被破坏。

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

【问题讨论】：

标签： twitter-bootstrap meteor jquery-chosen

【解决方案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');
});

【讨论】：