javascript - 在 mustache 模板中渲染 bootstrap-select 时出现问题

Question

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

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

样式已从 bootstrap-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 应用的，而不是从 bootstrap-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

找到了!

我必须在模板呈现后初始化选择。

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

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

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