Autoclosing unclosed tags in template

Question

Hi i'm tring to create such template

<script type='text/mustache' id='user-template'>                        
  <ul>
    {{#each users}}
      <li>{{name}}</li>                         
      {{#startHidden @index 2}}</ul><ul style = "display:none;">{{/startHidden}}
      {{#endHidden @index 2}}</ul><a href="#">show all</a>{{/endHidden}}
    {{/each}}
  </ul>              
</script>

So the idea is to close the upper <ul> after second user in list open new hidden <ul> and put all rest users here. But instead i got closed <ul> and final html looks like:

<ul>
  <li>name1</li>                            
  <li>name2</li>                            
  <ul style="display:none;"></ul>
  <li>name3</li>                            
  <li>name4</li>                            
  <a href="#">show all</a>
</ul>

This is my js

var data = [{name: "name1"},{name: "name2"},{name: "name3"},{name: "name4"}];                   
var users = new can.List(data);

var frag = can.view("user-template",{users:users},{
  'startHidden' : function(currentIndex, usersToShow, options){                     
     if (currentIndex() === usersToShow-1) {
       return options.fn(this);
     }
   },
   'endHidden' : function(currentIndex, usersToShow, options){                
     var length = options.scope.attr('users').length;

     if ((length>usersToShow)&&(currentIndex() === length-1)) {
       return options.fn(this);
     }
   }            
});

Is there any way to prevent auto closing tags, or may i'm just doing it wrong completely?

Answer 1

This is not possible. can.view.live.html can only remove or add elements in sequence. A workaround would be to just add a "hidden" class on an LI if it shouldn't be visible.