Рукоятки с подсчетом

Question

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

items : [ 
    { 
    name : "foo" 
    }, 
    { 
    name : "bar" 
    }, 
    { 
    name : "bacon" 
    }, 
    { 
    name : "burger" 
    } 
] 

В моем шаблоне я хочу создать списки размера 3, поэтому окончательный HTML должен выглядеть следующим образом:

<ul> 
    <li>foo</li> 
    <li>bar</li> 
    <li>bacon</li> 
</ul> 
<ul> 
    <li>burger</li> 
</ul> 

Теперь у меня есть это в моих рулей шаблон:

<ul> 
{{#each items}} 
<li>{{name}}<li> 
{{/each}} 
</ul> 

Так что я в конечном итоге с этим:

<ul> 
<li>foo</li> 
<li>bar</li> 
<li>bacon</li> 
<li>burger</li> 
</ul> 

Нужно ли создавать помощника? Как я могу его создать? Что-то вроде расширения помощника по #each по умолчанию и добавить дополнительный элемент DOM каждый X итерации (например, 0, 3, 6, 9 ...)

Благодаря

Answer 1

Спасибо за ваши ответы, я предпочитаю обращаться с логикой в ​​помощнике руля. Мне удалось это сделать, вот код:

Handlebars.registerHelper('list', function(context, options) { 

var ret = "", 
    listLength = 3, 
    u = 0; 

for(var i=0, j=context.length; i<j; i++) { 

if(i % listLength === 0 ) { 
    u = 0; 
    ret += '<ul>'; 
} 

ret += options.fn(context[i]); 

if(u === listLength - 1) { // Zero indexed 
    ret +='</ul>'; 
} 

u++; 
} 

return ret; 
}); 

И шаблон:

{{#list items}} 
    <li>{{name}}</li> 
    {{/list}} 

Answer 2

вам нужно создать пользовательский помощника:

Handlebars.registerHelper("separateList", function(arr, options) { 
    // Here we only apply one line, but implement your separation logic in here 
    return options.fn(arr[0]); // pass a single arr item here 
}); 

Тогда в шаблонах:

{{#separateList arr}} 
    <li>{{content}}</li> 
{{/separateList}} 

Это базовая реализация, но вы можете все, что вам нужно:

• http://handlebarsjs.com/#helpers
• http://handlebarsjs.com/block_helpers.html#iterators

Answer 3

Разделить массив элементов в подмассивы, содержащих три объекта каждый, давайте назовем это itemsThree. Любит это:

itemsThree = [ 
    [ 
     { 
      name : "foo" 
     }, 
     { 
      name : "bar" 
     }, 
     { 
      name : "bacon" 
     }  
    ], 
    [ 
     { 
      name: "burger" 
     } 
    ] 
]; 

(Не создавать вручную, очевидно.)

Затем цикл по каждой подрешетке в своем собственном <ul> и проходной каждый суб-массив и поместить объекты в <li>.

Имеет смысл?