在小鬍子模板中顯示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();