车把中的循环

Question

我有一组来自数据库的曲目，我想在 div 中显示。 更具体地说，我需要将它们中的每两个放在引导行中。我可以通过首先在片段元素中收集所有内容然后使用循环将它们放入行然后在目标 div 中轻松地在控制器 JS 文件中执行此操作，但我想知道是否可以在生产时直接执行此操作他们在车把里？ 这是车把模板：

{{#if result}}
{{#each result}}
<div class="playlist-item col-xs-4">
    <a href="#/user/{{username}}/playlist/{{id}}" class="no-style">
        <h3 class="result-title">{{title}}</h3>
        <p class="result-description">{{description}}</p>
        <img class="result-image img-circle" src="{{img}}">
    </a> 
    <br>
<a type="button" id="{{id.videoId}}" class="btn btn-default btn-remove" 
href="#/user/{{username}}/playlist/{{id}}/remove-from-playlist">Remove from 
playlist</a>
</div>
{{/each}}
{{else}}
<h4>You currently have no tracks in your playlist</h4>
{{/if}}

这里是 JS：

showPlaylist() {
    return Promise.all([
        userController.loadPlaylist(),
        templates.loadTemplate('playlist'),
    ])
    .then(([tracks, template]) => {
        let fragment = document.createDocumentFragment()
        let div = document.createElement('DIV');
        div.innerHTML = template(tracks);
        div = [...div.children];
        let len = div.length
        while(div.length > 0) {
            let row = document.createElement('div')
            row.className = 'row'
            let col = div.splice(0,2)
            row.append(col[0])
            if(col[1]) {
                row.append(col[1])
            }
            len -= 2;
            fragment.append(row)
        }
        $('#container').html(fragment)
    })
}

Answer 1

可以将您的项目分组到行中，但您需要使用自定义辅助函数来执行此操作。

我们需要创建一个block helper，它接受一个项目数组，将数组分解为具有指定列数的行，然后将块“行”模板应用于每一行。如果我们将块助手称为“eachRow”，则生成的模板可能如下所示：

{{#eachRow result 2}}
    <div class="row">
        {{#each columns}}
            <div class="playlist-item col-xs-4">
                {{!-- TODO: Rest of item template goes here. --}}
            </div>
        {{/each}}
    </div>
{{/eachRow}}

请注意，我们仍然在常规 Handlebars #each 块中使用项目模板。除了现在 #each 被包装在“行”模板块中。 2 是一个参数，将传递给我们的助手，它是每行中的列数。

接下来，我们将编写我们的助手：

Handlebars.registerHelper('eachRow', function (items, numColumns, options) {
    var result = '';

    for (var i = 0; i < items.length; i += numColumns) {
        result += options.fn({
            columns: items.slice(i, i + numColumns)
        });
    }

    return result;
});

这个助手简单地以numColumns 为增量迭代我们的源数组，并为每次迭代应用我们的“行”块模板，传递要在该行中呈现的项目数组 (columns)。助手连接行并返回结果。

我创建了一个fiddle 供参考。