Как использовать оператор mod в рулях?

Question

мне нужно добавить DIV, который держит 4 изображения для следующего кода JSon:

var images = [ 
     {img_path: "1/1.jpg"}, 
     {img_path: "1/2.jpg"}, 
     {img_path: "1/3.jpg"}, 
     {img_path: "1/4.jpg"}, 
     {img_path: "1/5.jpg"}, 
     {img_path: "1/6.jpg"}, 
     {img_path: "1/7.jpg"}, 
     {img_path: "1/8.jpg"}, 
     {img_path: "1/9.jpg"}, 
     {img_path: "1/10.jpg"} 
    ]; 

Моего шаблон руля код выглядит следующим образом:

<script id="gallery-template" type="text/x-handlebars-template">   
    @{{#each images}} 
      @{{#compare @index '%' 4}} 
       <div class="outer"> 
      {{/compare}} 
      <img src="@{{img_path}}" /> 
      @{{#compare @index '%' 8}} 
       </div> 
      {{/compare}} 
    @{{/each}} 
</script> 

    Handlebars.registerHelper('compare', function (lvalue, operator, rvalue, options) { 

    var operators, result; 

    if (arguments.length < 3) { 
     throw new Error("Handlerbars Helper 'compare' needs 2 parameters"); 
    }  

    if (options === undefined) { 
     options = rvalue; 
     rvalue = operator; 
     operator = "==="; 
    } 

    operators = { 
     '==': function (l, r) { return l == r; }, 
     '===': function (l, r) { return l === r; }, 
     '!=': function (l, r) { return l != r; }, 
     '!==': function (l, r) { return l !== r; }, 
     '<': function (l, r) { return l < r; }, 
     '>': function (l, r) { return l > r; }, 
     '<=': function (l, r) { return l <= r; }, 
     '>=': function (l, r) { return l >= r; }, 
     'typeof': function (l, r) { return typeof l == r; }, 
     '%': function (l, r) { return l % r == 0; } 
    }; 

    if (!operators[operator]) { 
     throw new Error("Handlerbars Helper 'compare' doesn't know the operator " + operator); 
    } 

    result = operators[operator](lvalue, rvalue); 

    if (result) { 
     return options.fn(this); 
    } else { 
     return options.inverse(this); 
    } 

}); 

Но моя первая логика создания ДИВ выглядит хорошо для этого , но закрытие div в соответствии с этим - это то, чего я не могу достичь. Любая помощь приветствуется. Он должен разбить точно на 4, и если у меня 10, то он должен закрыться для последнего 2. i.e 4,4,2. Открыт для изменения схемы json, если это необходимо для достижения этой цели.

Answer 1

мне удалось сделать это с помощью тонкой настройки немного с помощником и вызов функции, как это:

 <script id="gallery-template" type="text/x-handlebars-template">   
     @{{#each images}} 

      @{{#compare @index '%' 4 @last}} 
       <div class="container"> 
      @{{/compare}} 

      <img src="@{{img_path}}"> 

      @{{#compare @index '!%' 4 @last}} 
       </div> 
      @{{/compare}} 

     @{{/each}} 
    </script> 

И путем добавления дополнительного оператора % и передавая lastval функции хелперов

'!%': function (l, r) { 
    if(islast === true) 
    return true; l= l+1; 
    return l % r == 0; 
} 

!