在 Handlebars.js 辅助参数中连接字符串和变量的合理方法？

Posted 2023-02-23

【中文标题】在 Handlebars.js 辅助参数中连接字符串和变量的合理方法？

【英文标题】：Sane way to concat string and variable in Handlebars.js helper argument?

【发布时间】：2015-06-22 08:20:48

【问题描述】：

我正在尝试在 Ember 中构建一个简单的模态组件，但 Handlebars 的“无逻辑”似乎对我来说太不合逻辑了。有什么理智的方法可以达到这样的结果吗？

<h2>Nice block about title</h2>
<a href="#" data-toggle="modal" id="add-item-title"> !this works

#my-modal modal-id="add-item-title" header='New title' ! those don't
  <p>My body blabla</p>
/my-modal

目前，我最终将我的模态 ID 设为 "add-item-title"，字面意思以及模态标题。

而且...不，现在我不考虑将“标题”作为新参数传递并在模态中使用它。另一个模板中的模态标题可能不是“New title”而是“你确定吗？”或“有关title 的详细信息”。

【问题讨论】：

你应该这样做，或者在范围内创建一个计算属性，在控制器或组件中连接并构建字符串

最后一点， 中的 不受支持

显然它们不受支持！这正是我的问题:(如何在车把参数中插入变量？

【参考方案1】：

您正在寻找的是concat helper。使用它，您的第二个示例将变为：

#my-modal modal-id=(concat 'add-item-' title) header=(concat 'New ' title) 
  <p>My body blabla</p>
/my-modal

【讨论】：

哇！这非常有用。不知道它的存在。谢谢！

感谢这帮助我正确设置了背景网址......gist.github.com/Artistan/8ee82f6753dca632ca3307917b4e6034

【参考方案2】：

我来这里是为了在 handlebars.js 中寻找 concat 助手。如果它对登陆这里寻找相同内容的人有用，handlebars-helpers 内置了一个 append 助手。

> my-modal modal-id=(append "add-item-" title) header=(append "New " title)

https://github.com/helpers/handlebars-helpers

【参考方案3】：

是的，传递标题是我的做法。如果您需要在标题中添加不仅仅是 model.title 的内容，请在控制器上填充一个计算属性（es6 字符串插值语法）：

控制器

  modalHeader: function() 
    return `New $this.get('model.title')`;
  .property('model.title')

模板

#my-modal header=modalHeader
  <p>My body blabla</p>
/my-modal

至于 id，你可以在组件中做一些有趣的事情来覆盖它，参见this codepen，但我不知道它是如何与 ember 混淆的。为什么要为模态框设置 id？

【讨论】：

关于 id：我在示例中重命名了它。这个想法是将模态内部 ID 设置为我们可以在其外部明确引用的东西，这样我就可以通过 jQuery 或 Bootstrap 自己的行为打开/关闭模态。

关于modal header的问题是：不同的modal会有完全不同的title。如果我必须在模态本身中设置一个计算属性，它将不起作用：完整的标题必须来自外部。

是的，这就是为什么 modalHeader 计算属性在控制器上

你没明白。从 INSIDE 模态的任何部分设置模态标题是没有意义的。它应该由包含模板设置，因此它表现为一个组件，而不是一块硬编码的东西......