Ractivejsで水平テーブルを垂直に変換

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> 

---

Iはすでに

を試しRACTIVE約0

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

よくある誤解は、それが口ひげ構文を使用しているため、人々はそれが口ひげのような働きを考えるということです。

Mustacheは文字列補間を行います。ここでは{{ }}をオブジェクト内の対応する値に置き換え、HTMLを取得します。一方、RactiveはテンプレートをASTにコンパイルします。次に、そのツリーを使用してDOMを作成します。これはBabelがReactにJSXをオブジェクト表現に変換する方法、または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>