【问题标题】:Accessing previous index value while looping with #each in handlebars使用把手中的#each 循环时访问先前的索引值
【发布时间】:2018-03-21 14:07:17
【问题描述】:

在我的车把应用程序中,我试图循环浏览一组帖子。我正在尝试访问每个帖子的 ID。我正在正确获取当前帖子的 ID。但是还是每张图片,我都需要提供上一个和下一个 id。我使用数学助手将索引递增/递减 1,它工作正常。

我的想法是我将使用车把子表达式来计算所需的索引,然后我将使用查找帮助程序来访问该索引处的值。但是我的代码没有按预期工作。有人可以帮我提供正确的代码吗?

{{#each posts}}
    <div class="lb-overlay" id="image-{{id}}">
        <a href="#image-{{lookup id (math @index '-' 1)}}" class="lb-prev">Prev</a>
        <a href="#image-{{lookup id (math @index '+' 1)}}" class="lb-next">Next</a>
    </div> 
{{/each}}

更新:我自己想出来的。实现了我自己的车把助手。

{{#each posts}}     
    <div class="lb-overlay" id="image-{{id}}">       
        <a href="#image-{{getIdByIndex ../posts (math @index '-' 1)}}" class="lb-prev">Prev</a>       
        a href="#image-{{getIdByIndex ../posts (math @index '+' 1)}}" class="lb-next">Next   
    </div> 
{{/each}}

【问题讨论】:

  • 你是如何让数学助手工作的?我正在使用 webpack 4,但不确定如何包含它们或定义它们。这个 var helpers = require("handlebars-helpers")();在 webpack 配置中不起作用。谢谢。

标签: handlebars.js handlebarshelper


【解决方案1】:
    {{#each posts}}     
        <div class="lb-overlay" id="image-{{id}}">       
            <a href="#image-{{getIdByIndex ../posts (math @index '-' 1)}}" class="lb-prev">Prev</a>       
            a href="#image-{{getIdByIndex ../posts (math @index '+' 1)}}" class="lb-next">Next   
        </div> 
    {{/each}}

    getIdByIndex: function(posts, index) {
        return posts[index].id;
    }

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-04-12
    • 2012-04-24
    • 2021-09-07
    • 2016-05-24
    • 2014-12-16
    • 2013-02-15
    • 2014-10-29
    • 1970-01-01
    相关资源
    最近更新 更多