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上添加“隐藏”类（如果它不应该可见）。

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

1 个答案: