在 Ractivejs 中将水平 table 转换为垂直

Question

我有一个这样的模板，我希望 ro 使 table 垂直（在我的环境中不能使用部分，我不想在倒置条件下或复制 html个元素）

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

结果应该是：

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

我已经试过了

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>

和

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

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

Answer 1

关于 Ractive 的一个常见误解是，因为它使用了 Mustache 语法，所以人们认为它的行为类似于 Mustache。

Mustache 进行字符串插值，将 {{ }} 替换为对象中对应的值，然后得到 HTML。另一方面，Ractive 将模板编译成 AST。然后它使用该树创建 DOM。它类似于 Babel 在将 JSX 提供给 React 之前将其转换为对象表示的方式，或者 HTML 解析器如何解析 HTML，然后构建 DOM.

因此，为了让您的场景发挥作用，您必须考虑格式正确的 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>

在 Ractivejs 中将水平 table 转换为垂直

Convert a horizontal table to a vertical one in Ractivejs

html

mustache

ractivejs