Question

我正在尝试在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}}"，字面意思，以及模态标题。

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

Answer 1

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

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

Answer 2

我到达这里是在handlebars.js中寻找concat助手。万一对于登陆这里的人有用，handlebars-helpers内置有append helper。

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

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

Answer 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？

Sane方式在Handlebars.js帮助器参数中连接字符串和变量？

3 个答案: