Convert a horizontal table to a vertical one in Ractivejs

Question

I have a template like this, and I want ro make the table vertical(using partials is not an option in my environment, and I don't want to do it with inverted condition or duplicating html elements)

<table>
  <tr>
    <td>row1</td>
    <td>row1</td>
    <td>row1</td>
  <tr>
</table>

The result should be:

<table>
      <tr>
        <td>row1</td>
      </tr>
      <tr>
        <td>row1</td>
      </tr>
      <tr>
        <td>row1</td>
      <tr>
    </table>

---

I already tried

var data = {
foo:true
}

<table>
      <tr>
        <td>row1</td>
      {{#foo}}</tr><tr> {{/foo}} 
        <td>row1</td>
      {{#foo}}</tr><tr> {{/foo}} 
        <td>row1</td>
      <tr>
    </table>

and

var data = {
foo:'</tr><tr>'
}

<table>
   <tr>
     <td>row1</td>
   {{{foo}}}
     <td>row1</td>
   {{{foo}}}
     <td>row1</td>
   <tr>
</table>

Answer 1

A common misconception about Ractive is that because it uses the Mustache syntax, people think it acts like Mustache.

Mustache does string interpolation, where it replaces {{ }} to values that correspond in an object, and you get HTML. Ractive, on the otherhand, compiles the template into an AST. Then it uses that tree to create the DOM. It is similar to how Babel converts JSX into its object representation before feeding it to React, or how an HTML parser parses HTML, then constructing the DOM.

So for your scenario to work, you'll have to think in terms of properly-formed HTML:

Ractive.DEBUG = false;

const VerticalTableComponent = Ractive.extend({
  template: `
    <table border="1">
      {{#tableItems}}
        <tr>
          <td>{{.}}</td>
        </tr>
      {{/}}
    </table>
  `
});

const app = VerticalTableComponent ({
  el: '#app',
  data: {
    tableItems: ['foo', 'bar', 'baz', 'quz']
  }
});

<script src="https://unpkg.com/ractive@0.8.12/ractive.min.js"></script>
<div id="app"></div>