canjs - 自动关闭模板中未关闭的标签

Question

嗨，我正在尝试创建这样的模板

<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>

所以想法是<ul>在列表中的第二个用户之后关闭上层打开新隐藏<ul>并将所有其余用户放在这里。但相反，我关闭了<ul>，最终的 html 看起来像：

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

这是我的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);
     }
   }            
});

有什么方法可以防止自动关闭标签，还是我完全做错了？

Answer 1

这是不可能的。can.view.live.html 只能按顺序删除或添加元素。一种解决方法是在 LI 上添加一个“隐藏”类，如果它不应该是可见的。