在小胡子模板中显示bootstrap-select问题

Question

我在使用bootstrap-select时遇到问题。 当我在HTML文件中创建一个简单的选择，一切都按预期工作：

<select class="selectpicker" multiple> 
    <option selected>Mustard</option> 
    <option selected>Ketchup</option> 
    <option>Relish</option> 
</select> 

风格从正确引导，select.min.css

应用，但是当我尝试使其在一个模板，它不适用正确的CSS/JS。

<script type="template/text" id="template"> 
     <select class="selectpicker" multiple> 
      <option selected>Mustard</option> 
      <option selected>Ketchup</option> 
      <option>Relish</option> 
     </select> 
     <table id="tblItems" class="table table-striped"> 
      <thead> 
      <tr> 
       <th>Id</th> 
       <th>Action</th> 
       ... 
     </table> 
</script> 

在控制台中，我可以看到，风格从bootstrap.min.css应用，而不是从引导-select.min.css

这就是我的头部定义：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script> 

<link rel="stylesheet" href="css/bootstrap-select.min.css"> 

<script src="js/bootstrap-select.min.js"></script> 

这是来自这样一个事实，即模板渲染时可能不会加载boostrap-select？

Answer 1

找到了！

我不得不在我的模板呈现后初始化select。

var template = $('#template').html(); 

var output = Mustache.render(template, {rows:context}); 

$("div").append(output); 
$('.selectpicker').selectpicker();