Question

我正在考虑用Ractive.js替换Handlebars.js。这种变化似乎很顺利，但这是我的第一个问题，可能是一个新手问题。

我有一个包含表格的Ractive.js模板。模板中的表有几个Bootstrap类

class="table table-striped table-bordered table-condensed table-hover"

当我将此模板与Handlebars.js一起使用时，表格中的Bootstrap样式显示正常，如您在jsfiddle中所见。

但是当我使用与Ractive.js相同的模板时，样式不会显示，正如您在jsfiddle中看到的那样。

我尝试手动添加类：

$("#table").addClass("table")
$("#table").addClass("table-striped table-bordered")
$("#table").addClass("table-condensed table-hover")

没有成功。我必须遗漏一些非常简单的东西。

Answer 1

我认为你需要<tbody>才能使引导表工作jsfiddle

Answer 2

使用Ractive 0.4.0，您可以创建一个组件来封装引导表：

<script id="bootstrap-table" type="x-template">
    <table id="table" class="table table-striped table-bordered table-condensed table-hover" >
        <tbody>
            {{>content}}
        </tbody>
    </table>
</script>

然后用它代替<table>：

<script id="templateOne" type="x-template">
    <bootstrap-table>
        <tr> 
            <th>
                Column one
                ...

请参阅http://jsfiddle.net/PCcqJ/2/

如何将Bootstrap CSS应用到像Handlebars这样的Ractive.js模板中？

2 个答案: