RactiveJS template условный HTML

Question

Я стараюсь, чтобы HTML выглядел условно в шаблоне без ссылок.

Как вы можете видеть в этом JSFiddle результат не так, как ожидалось - таблица представляет собой одну строку.

Мой шаблон:

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

Мой Javascript:

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

Answer 1

В отличие от традиционных систем шаблонных, где вы генерируете строку HTML, каждая часть шаблона теля Тяговая должен быть действительный сам по себе, иначе построить виртуальный 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>