Ractivejs에서 가로형 테이블을 가로형 테이블로 변환

Question

저는이 템플릿과 같은 템플릿을 가지고 있습니다. 나는 테이블을 세로로 만듭니다. (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:'</tr><tr>' 
} 

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

Answer 1

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> 

및

이는 콧수염 구문을 사용하기 때문에, 사람들은 콧수염 같은 역할을 생각한다는 것입니다.

콧수염은 문자열 보간을 수행합니다. 여기서는 {{ }}을 개체에 해당하는 값으로 바꾸고 HTML을 얻습니다. Ractive는 템플릿을 AST로 컴파일합니다. 그런 다음 해당 트리를 사용하여 DOM을 만듭니다. Babel이 JSX를 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>