javascript - 在不使用额外助手的情况下限制 Handlebars #each 中的结果
问题描述
所以,我知道如果我能够实现额外的车把助手,我将能够解决这个问题,但这不是一个选择。
我们为帮助台 [ZenDesk] 使用第三方后端系统,它使用把手作为动态内容的通用标记。我在我们的帮助中心网站主页上有一个部分,我想列出前 5-6 篇常见问题解答文章,然后在下面的查看更多链接供用户查看该特定部分中的其余文章。
开箱即用,它们允许我们使用 IF 和 IS 条件,但除了 TRUE 或 FALSE 之外没有比较,不大于、不小于、不大于或等于等。我写了一个简单的助手,它允许为此,但无论我把它放在我们可用的模板中的什么位置,它总是会产生一个函数无效的错误。
在与此应用程序的支持团队讨论此问题后,我被告知不允许使用任何自定义助手。我必须完全依靠 HTML、CSS 和 JAVASCRIPT/JQUERY 来找到解决方案。
所以.... 有谁知道我如何通过使用 CSS 或 JAVASCRIPT 在 5 次迭代中关闭车把 #each 循环的可能解决方案?
更新:2018 年 9 月 5 日:
这是我用于“常见问题”部分的#each 循环
<h2>Frequently Asked Questions</h2>
<section class="section faq-base">
<section class="categories">
<ul class="">
{{#each categories}}
{{#if ../has_multiple_categories}}
<li class="">
<a href='{{url}}' class="">
<h4 class="blocks-item-title">{{name}}</h4>
</a>
</li>
{{else}}
{{#each sections}}
{{#is id //ID FOR FREQUENTLY ASKED QUESTIONS SECTION}}
<div class="accordion homeFAQ" id="homeFAQ">
{{#each articles}}
<div class="card">
<div class="card-header" id="heading{{@index}}">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse{{@index}}" aria-expanded="true" aria-controls="collapse{{@index}}">
{{title}}
</button>
</h5>
</div>
<div id="collapse{{@index}}" class="collapse" aria-labelledby="heading{{@index}}" data-parent="#homeFAQ">
<div class="card-body">
{{body}}
</div>
</div>
</div>
{{/each}}
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<a href="{{url}}" class="btn btn-link collapsed">...SEE MORE</a>
</h5>
</div>
</div>
</div>
{{/is}}
{{/each}}
{{/if}}
{{/each}}
</ul>
</section>
</section>
从上面的代码可以看出,我将FAQ插入到Bootstrap Accordion中,最后是...SEE MORE
按钮
解决方案
你能不能display:none
默认给文章加a,然后用JS统计页面上文章的数量,根据页面上文章的类(或什么),然后再次使用JSdisplay:none
从前5个中删除-6 篇文章?可能不是最优雅的方法,但应该是完成您正在寻找的东西的一种方法。
推荐阅读
- javascript - 如何在 Js 中为所有树数组的对象添加一个项目?
- c# - C#如何在不使用值的情况下显式调用getter
- python - Python 库“PDFrw”写入在单击该字段之前保持不可见的注释
- html - 单击提交按钮时,输入文本框图标正在扩展,如何使用 CSS 修复它?
- regex - 使用 Ansible 正则表达式在文件中搜索字符串
- xaml - 如何设置 xamarin 表单输入字段的禁用文本颜色?
- sql - 获取每天的最小值和最大值之间的差异
- scala - 在 Spark 程序中访问 Oozie 配置
- python - 解析跳过元素
- php - PHP中不同语言的序数指标