Question

我使用bootstrap。当我用纯HTML创建表时，bootstrap的表样式将按预期应用。

但是，当我将相同的 HTML插入到Ember.js模板中时，引导程序的表样式似乎不适用（例如，表边框，填充和条带不存在）。小提琴：http://jsfiddle.net/5evymbou/

纯HTML：

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <table id="search-results" class="table table-striped">
                <tr>
                    <td>a</td>
                    <td>b</td>
                    <td>c</td>
                </tr>
                <tr>
                    <td>a</td>
                    <td>b</td>
                    <td>c</td>
                </tr>
            </table>
        </div>
    </div>
</div>

相同的HTML - 但在Ember模板中使用：

<script type="text/x-handlebars" data-template-name="application">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <table id="search-results" class="table table-striped">
                    <tr>
                        <td>a</td>
                        <td>b</td>
                        <td>c</td>
                    </tr>
                    <tr>
                        <td>a</td>
                        <td>b</td>
                        <td>c</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</script>

<div id="root"></div>

<script>
    App = Em.Application.create({
        rootElement: '#root'
    })
</script>

Answer 1

这是因为Bootsrap CSS依赖于tbody，thead等的存在，如果您不包含它们，浏览器会自动将其插入到您的HTML中。您可以通过检查浏览器开发工具中的table来自行检查。

因为在解析HTML之后您的ember表被添加到DOM中，所以浏览器不会自动创建这些元素。

Bootstrap CSS示例：

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}

您可以通过向模板添加tbody元素轻松修复代码：

<script type="text/x-handlebars" data-template-name="application">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <table id="search-results" class="table table-striped">
                    <tbody>
                        <tr>
                            <td>a</td>
                            <td>b</td>
                            <td>c</td>
                        </tr>
                        <tr>
                            <td>a</td>
                            <td>b</td>
                            <td>c</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</script>

Updated Fiddle

与Ember.js

1 个答案: