handlebars.js 相关问题

使用模板以编程方式生成 JS 文件

我正在尝试使用一些配置（它包含 URL 和路由）自动执行 API 调用，我想写出到 JS 文件。现在我正在为此使用文件流。但是，我正在寻找像

handlebars.js 中每个的限制结果

我写了一个显示推文的小插件。以下是循环显示推文的代码。 {{#...</desc> <question vote="30"> <p>我写了一个显示推文的小插件。以下是循环显示推文的代码。</p> <pre><code> &lt;script id=&#34;tweets-template&#34; type=&#34;text/x-handlebars-template&#34; &gt; {{#each this}} &lt;li&gt; &lt;p&gt;{{tweet}}&lt;/p&gt; &lt;span id=&#34;author&#34;&gt;{{author}}&lt;span/&gt; &lt;/li&gt; {{/each}} &lt;/script&gt; </code></pre> <p>但我想做的是将推文数量限制为 5 或 10。但是循环列出了所有可用的推文。我如何限制像 for 循环中的推文。喜欢</p> <pre><code> for(i=0;i&lt;5;i++){display the tweets} </code></pre> </question> <answer tick="true" vote="42"> <p>我想你有两个选择：</p> <ol> <li>在将其交给 Handlebars 之前限制您收藏的大小。</li> <li>编写您自己的块助手，让您指定一个限制。</li> </ol> <p>实际 <a href="https://github.com/wycats/handlebars.js/blob/master/lib/handlebars/base.js#L57"><pre><code>each</code></pre> 实现</a> 非常简单，因此调整它以包含上限非常简单：</p> <pre><code>// Warning: untested code Handlebars.registerHelper(&#39;each_upto&#39;, function(ary, max, options) { if(!ary || ary.length == 0) return options.inverse(this); var result = [ ]; for(var i = 0; i &lt; max &amp;&amp; i &lt; ary.length; ++i) result.push(options.fn(ary[i])); return result.join(&#39;&#39;); }); </code></pre> <p>然后在你的模板中：</p> <pre><code>&lt;script id=&#34;tweets-template&#34; type=&#34;text/x-handlebars-template&#34; &gt; {{#each_upto this 5}} &lt;li&gt; &lt;p&gt;{{tweet}}&lt;/p&gt; &lt;span id=&#34;author&#34;&gt;{{author}}&lt;span/&gt; &lt;/li&gt; {{/each_upto}} &lt;/script&gt; </code></pre> </answer> <answer tick="false" vote="27"> <p>我同意复制<pre><code>each</code></pre>目前不是一个好主意，正如<a href="https://stackoverflow.com/a/21993334/1025458">Dtipson</a>所说。</p> <p>他提出的使用 <pre><code>limit</code></pre> 助手的方法确实是 IMO 的最佳方法，这是实现它所需的代码：</p> <pre><code>// limit an array to a maximum of elements (from the start) Handlebars.registerHelper(&#39;limit&#39;, function (arr, limit) { if (!Array.isArray(arr)) { return []; } return arr.slice(0, limit); }); </code></pre> <p>然后在你的模板中（假设你的数组是<pre><code>cart.products</code></pre>）：</p> <pre><code>{{#each (limit cart.products 5)}} &lt;li&gt;Index is {{@index}} - element is {{this}}&lt;/li&gt; {{/each}} </code></pre> <p>当然，您需要支持子表达式的最新车把版本才能正常工作。</p> </answer> <answer tick="false" vote="4"> <p>“每个”不再很简单：<a href="https://github.com/wycats/handlebars.js/blob/master/lib/handlebars/base.js#L99" rel="nofollow">https://github.com/wycats/handlebars.js/blob/master/lib/handlebars/base.js#L99</a></p> <p>那是因为每个人现在都支持您可能仍希望访问的大量循环信息。</p> <p>因此，如果您不想重新实现更复杂的每个数据，那么尽早限制数据可能更可取。如果您使用的是最新版本的车把，您也可以尝试在每个中使用子表达式（即 {{#each (limit data 6)}}。</p> </answer> <answer tick="false" vote="0"> <p>你可以这样做：</p> <pre><code> &lt;div&gt; {{#each react}} {{#ifCond @index &#39;&lt;&#39; 5}} &lt;h3&gt;{{@index}} {{name}}&lt;/h3&gt;&lt;/a&gt; {{/ifCond}} {{/each}} &lt;/div&gt; </code></pre> <p><strong>定义ifCond:</strong> helper.js:</p> <pre><code>var helper = {}; module.exports = helper; helper.ifCond = function (v1, operator, v2, options) { switch (operator) { case &#39;==&#39;: return (v1 == v2) ? options.fn(this) : options.inverse(this); case &#39;===&#39;: return (v1 === v2) ? options.fn(this) : options.inverse(this); case &#39;!=&#39;: return (v1 != v2) ? options.fn(this) : options.inverse(this); case &#39;!==&#39;: return (v1 !== v2) ? options.fn(this) : options.inverse(this); case &#39;&lt;&#39;: return (v1 &lt; v2) ? options.fn(this) : options.inverse(this); case &#39;&lt;=&#39;: return (v1 &lt;= v2) ? options.fn(this) : options.inverse(this); case &#39;&gt;&#39;: return (v1 &gt; v2) ? options.fn(this) : options.inverse(this); case &#39;&gt;=&#39;: return (v1 &gt;= v2) ? options.fn(this) : options.inverse(this); case &#39;&amp;&amp;&#39;: return (v1 &amp;&amp; v2) ? options.fn(this) : options.inverse(this); case &#39;||&#39;: return (v1 || v2) ? options.fn(this) : options.inverse(this); default: return options.inverse(this); } }; </code></pre> <p>在 App.js 中：</p> <pre><code>const helper = require(&#39;./helper/helper&#39;); app.engine(&#39;hbs&#39;, handlebars({ layoutsDir: __dirname + &#39;/views/layouts&#39;, extname: &#39;hbs&#39;, helpers: helper })); </code></pre> <p>输出： <a href="https://i.stack.imgur.com/TSEb0.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL1RTRWIwLnBuZw==" alt=""/></a></p> </answer> <answer tick="false" vote="-1"> <p>只需看一下<pre><code>{{@index}}</code></pre> 值并将其包裹在<pre><code>{{#if}}</code></pre> 块中。如果索引大于某个数字，则不要呈现标记。</p> <pre><code>var collection = { ... tweets ... } {{#each collection}} {{#if @index &lt; 5}} &lt;tweet markup&gt; {{/if}} {{/each}} </code></pre> </answer> </body></html>

How to make a If statement in handlebars?

我正在车把上制作一个页面，其中包含您可以获得的每枚奖牌的条件。它还为传入 medalProgress 的用户使用数据库。出于某种原因，无论我做什么，它都会给我一个错误...

从给定文本中检索所有嵌入的 Handlebar 变量

我正在使用 Handlebars 库并开发一个函数来检索所有嵌入的变量。该功能适用于简单的非逻辑文本。然而，当有 if 语句时，乐趣...

Vite 插件把手不适用于多页面设置

Vite-plugin-handlebars 不适用于嵌套在 /public 中的任何页面。例如，about.html 嵌套在 /public 中，因为 Vite 在运行构建时将其捆绑到根目录中。然而，这

让Google insights 清楚我的网站不是只有一页？车把

我的网站使用 express.js 和 handlebars 编写。 因此，当我打开 https://pagespeed.web.dev/ 并写入我的站点 URL 时 - 一段时间后，我只看到一页的结果。如果更准确地说，abo...

显示带有车把的给定项目的所有报告的问题

我正在创建一个跟踪项目和报告的网站。我的目标是创建一个前端端点 (http://localhost:3001/post/1) 来显示与 gi 相关的所有报告...

将外部文件内容导入车把

希望有人能给我提示。 我想将一个文件中的内容导入到我的车把文件中。是否可以？ 在我的例子中，它是一个 css/scss 文件（例如 reset.css）我想要的样式

无法在视图目录“./views”中查找视图“forms”

这是我一直用来学习的代码 const express = require("快递"); const app = express(); const handlebars = require('express-handlebars'); const bodyParser = require('body-

Handelbars Helper 未定义

我正在使用 Rust 和 Rocket Framework(v0.5) 编写一个网站。我正在使用 Handlebars 并在打开我的网站时收到此错误： >> 匹配：（索引）GET / >> 把手：错误

在 Ghost 中使用 2 {{navigations}}

这是我第一次使用 Ghost 并创建自己的主题。我注意到在管理面板中，有 2 个导航区域：主要和次要。 我想用初级区来

Handlebars eq 功能与其他数据模型

{{#times league.groupNumber}} {{#times league.groupNumber}} <form action="/ayarlar/league/edit-{{this}}/{{../league._id}}?_method=PUT" method="POST" class="boxInfo"> <div class="grupDiv" style="width:150px;display:inline-block;border:1px solid black;padding:10px;"> <h2>Grup {{this}}</h2> <select name="groupNo{{this}}" id="" multiple> {{#each ../team}} <option value="{{_id}}">{{#if (eq _id ../../league.groupNo1.[0]._id ) }}Warning! {{/if}}{{teamName}}</option> {{/each}} </select> <input type="hidden" name="_method" value="PUT"> <button type="submit" class="greenButton">Ekle</button> <ul> <span style="font-weight:600;">Takımlar : </span> {{#each (lookup ../league (concat 'groupNo' this))}} <li>{{this.teamName}}</li> {{/each}} </ul> </div> </form> {{/times}} 这是我的代码块，这是我遇到问题的代码。 {{#each ../team}} <option value="{{_id}}">{{#if (eq _id ../../league.groupNo1.[0]._id ) }}Warning! {{/if}}{{teamName}}</option> {{/each}} 如果当前 _id 等于 league.groupNo1 元素 _id ，当我运行此代码时，我想在 teamName 之前看到警告文本。但我什么也看不见。此外，当编写这样的代码时，我可以看到值并且它们是相同的。 {{#each ../team}} <option value="{{_id}}">{{_id}}</option> <option value="">{{../../league.groupNo1.[0]._id}}</option> <option value="{{_id}}">{{#if (eq _id ../../league.groupNo1.[0]._id ) }}Uyarı{{/if}}{{teamName}}</option> {{/each}} 这也是我的架构： const LeagueSchema = new mongoose.Schema({ leagueName : {type:String, require:true, unique: true}, typeSelect : {type:String, require: true}, importanceOfLeague : {type: Number, require:true}, leagueMiddleRefereeIsChecked : {type:Boolean, default:false}, leagueLinemanIsChecked : {type:Boolean, default:false}, leagueSecondLinemanIsChecked: {type:Boolean, default:false}, leagueFourthRefereeIsChecked : {type:Boolean, default:false}, leagueVarRefereeIsChecked : {type:Boolean, default:false}, leagueSecondVarRefereeIsChecked: {type:Boolean, default:false}, groupNumber: {type:Number}, groupNo1: [{ type: Schema.Types.ObjectId, ref: "team"}], groupNo2: [{ type: Schema.Types.ObjectId, ref: "team"}], groupNo3: [{ type: Schema.Types.ObjectId, ref: "team"}], groupNo4: [{ type: Schema.Types.ObjectId, ref: "team"}], groupNo5: [{ type: Schema.Types.ObjectId, ref: "team"}], groupNo6: [{ type: Schema.Types.ObjectId, ref: "team"}], groupNo7: [{ type: Schema.Types.ObjectId, ref: "team"}], const TeamSchema = new mongoose.Schema({ teamName: { type: String, require:true}, leagueName: { type: Schema.Types.ObjectId, ref: "league"}, date: { type: Date, default: Date.now }, isTeamSelected: {type:Boolean, default:false}, }) 这是我的 router.get 代码： router.get("/:id",(req,res) =>{ Team.find({ leagueName: req.params.id }).sort({teamName:1}).lean().then(team =>{ League.findById(req.params.id) .populate(teamPaths) .then(league => { Team.find({ leagueName: req.params.id }).sort({teamName:1}).lean().then(team =>{ res.render("site/leagueDataScreen", {league:league.toJSON(),team:team}) }) }) }) }) 我尝试使用查找功能，但出现错误。 {{#each ../team}} <option value="{{_id}}">{{#if (eq _id (lookup ../../league.groupNo1.[0]._id)) }}Warning! {{/if}}{{teamName}} </option> {{/each}}

如何从 Handlebars 只导入需要的函数/类

我在 Angular 应用程序中使用 Handlebars，目前我已将其导入为 import * as Handlebars from 'handlebars'；但我只想导入 Handlebars 的必需成员，例如 import {

base64 图像在 headertemplate puppeteer 中尝试渲染图像时损坏

我想使用 puppeteer/PDFOptions 创建一个 pdf。它在 headerTemplate 中包含一个 base64 编码的图像： 等待页面.pdf({ 显示页眉页脚：真， 打印背景：真， 标题温度...

是否可以覆盖三重隐藏表达式？

我们有很多现有的模板，它们利用三斜杠 {{{ }}} 表达式来呈现我们认为来自已知来源的安全 HTML 字符串。也就是说，它会弹出我们的漏洞...

请求修复：使用 handlebars.compile 时模板注入覆盖率错误

const compileTemplate =（名称）=> { 让 sanitized_name = sanitizeReq(名称); let file = fs.readFileSync(""+__dirname+"/"+sanitized_name,"utf-8"); //污点，赋值...

车把 {{each}} inside {{#times}}

{{#times league.groupNumber}} 组 {{this}}<... {{#times league.groupNumber}} <div class="grupDiv" style="width:150px;display:inline-block;border:1px solid black;padding:10px"> <h2>Grup {{this}}</h2> <select name="" id="" multiple> {{#each team}} <option value="{{._id}}">{{teamName}}</option> {{/each}} </select> </div> {{/times}} 当我尝试运行这段代码时，它不起作用。但是，当我删除 {{#times}} 块时，代码可以正常工作。我也这样定义了时间助手： const hbs = exphbs.create({ helpers: { times: function(n, block) { let accum = ''; for (let i = 1; i <= n; ++i) accum += block.fn(i); return accum; }, eq: function (a, b) { return a === b; } } }); 我想将每个teamName呈现为一个选项，但没有一个是。 问题是，当您在内部由{{#times league.groupNumber}} {{/times}}包裹的块时，上下文-即this-是传递给block.fn的当前值在您的times助手中，它是一个数字。 （这就是为什么<h2>Grup {{this}}</h2>会导致类似<h2>Grup 1</h2>的原因） 假设您的数据形状如下： { league: { groupNumber: 2 }, team: [ { _id: 'TeamA', teamName: 'Team A' }, { _id: 'TeamB', teamName: 'Team B' }, { _id: 'TeamC', teamName: 'Team C' } ] } 然后您需要在 #times 块中“提升”上下文级别，以便从父上下文中获取 team。模板变为： {{#times league.groupNumber}} <div class="grupDiv" style="width:150px;display:inline-block;border:1px solid black;padding:10px"> <h2>Grup {{this}}</h2> <select name="" id="" multiple> {{#each ../team}} <option value="{{_id}}">{{teamName}}</option> {{/each}} </select> </div> {{/times}} const template = Handlebars.compile( ` {{#times league.groupNumber}} <div class="grupDiv" style="width:150px;display:inline-block;border:1px solid black;padding:10px"> <h2>Grup {{this}}</h2> <select name="" id="" multiple> {{#each ../team}} <option value="{{_id}}">{{teamName}}</option> {{/each}} </select> </div> {{/times}} `); Handlebars.registerHelper('times', function (n, block) { let accum = ''; for (let i = 1; i <= n; ++i) accum += block.fn(i); return accum; }); const data = { league: { groupNumber: 2 }, team: [ { _id: 'TeamA', teamName: 'Team A' }, { _id: 'TeamB', teamName: 'Team B' }, { _id: 'TeamC', teamName: 'Team C' } ] }; const output = template(data); document.body.innerHTML = output; <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script> 和here是小提琴中的相同代码，供参考。

使用 Handlebars.js 遍历名称列表

我有一个 Bootstrap 选择下拉菜单，我正在尝试使用 Handlebars JS 将所需的选项输出到我的选择中，但它们没有出现。我在这里阅读了一些示例，所以不确定是什么......

如何将数据从 mysql db 传递到 js 中的图表 js [关闭]

如何将睡眠时间从 mysql 传递到 chartjs 数据。 const sql= select BedTime,wakeUpTime,(-(BedTime-12)+(0+wakeUpTime)) 作为 Sleepdurtion from Usersleepinfomation order by id limit 5;

用js模板显示删除按钮

下面的代码生成一个网站，让用户有机会输入相应数量的原料（输入栏）。当用户按下添加按钮后，输入的...。