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

无法在胡子模板中渲染bootstrap-select

1 个答案: