把手圈

Question

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

{{#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作为参考。