RactiveJS 템플릿 조건부 HTML

Question

나는 조건부로 템플릿을 사용하여 HTML을 표시하려고합니다.

이 JSFiddle에서 볼 수 있듯이 예상대로 결과가 아닙니다. 표는 단일 행입니다.

내 템플릿 :

<table border="1"> 
    <tr> 
    {{#list:num}} 
     <td>{{.}}</td> 
     {{#if num > 0 && num % 2 == 0}} 
       </tr><tr> 
     {{/if}} 
    {{/list}} 
    </tr> 
</table> 

내 자바 스크립트 : 당신이 HTML 문자열을 생성하고 기존 템플릿 시스템과는 달리

var ractive = new Ractive({ 
    el: "#cont", 
    template: "#template", 
    data: { 
     list: [1, 2, 3, 4, 5, 6] 
    } 
}); 

Answer 1

하는 Ractive 템플릿의 각 섹션은해야합니다 그 자체로 유효합니다. 그렇지 않으면 가상 DOM을 구성하는 것이 불가능합니다. 즉, 섹션 내에 </tr><tr>을 가질 수 없습니다. (. 정말, 파서는 오류가 발생한다 - 나는 raised an issue on GitHub을했습니다) 그룹을 통해 그룹에 항목이 될 것

다른 접근 방식을, 그리고 반복 :

var ractive = new Ractive({ 
 
    el: "#cont", 
 
    template: "#template", 
 
    data: { 
 
     list: [1, 2, 3, 4, 5, 6] 
 
    }, 
 
    computed: { 
 
     grouped: function() { 
 
      var list = this.get('list'), 
 
       grouped = [], 
 
       group; 
 
      
 
      group = []; 
 
      grouped.push(group); 
 
      
 
      list.forEach(function (item, i) { 
 
       if (i > 0 && i % 2 == 0) { 
 
        group = []; 
 
        grouped.push(group); 
 
       } 
 
       
 
       group.push(item); 
 
      }); 
 
      
 
      return grouped; 
 
     } 
 
    } 
 
});

<script src="http://cdn.ractivejs.org/0.6.0/ractive.js"></script> 
 

 
<script type="text/html" id="template" > 
 
    <table border="1"> 
 
     {{#each grouped}} 
 
      <tr> 
 
       {{#each this}} 
 
        <td>{{.}}</td> 
 
       {{/each}} 
 
      </tr> 
 
     {{/each}} 
 
    </table> 
 
</script> 
 

 
<div id="cont"></div>