How to apply Bootstrap CSS into a Ractive.js template like Handlebars does?

Question

I'm thinking in replace Handlebars.js with Ractive.js. The change seems smooth but this is my first problem and can be a newbie question.

I have a Ractive.js template which contains a table. The table in the template has several Bootstrap classes

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

When I use this template with Handlebars.js the Bootstrap styles in the table are shown ok, as you can see in this jsfiddle.

But when I use the same template with Ractive.js the styles are not shown, as you can see in this jsfiddle.

I tried adding the classes manually:

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

Without success. I must be missing something very simple.

Answer 1

I think you just need <tbody> for bootstrap tables to work jsfiddle

Answer 2

With Ractive 0.4.0, you can create a component to encapsulate a bootstrap table:

<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>

Then use it in place of <table>:

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

See http://jsfiddle.net/PCcqJ/2/