Question

我有一个这样的模板，我希望ro使表垂直（在我的环境中使用partials不是一个选项，我不想用倒置条件或复制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中将水平表转换为垂直表

1 个答案: