如何在Emblem.js中从对象内部插入一个值？

Question

在Emblem.js模板中有以下代码：

each segment in controller
  .panel.panel-default
    .panel-heading
      h4.panel-title
        a data-parent="#accordion" data-toggle="collapse" href="#collapse{{segment.id}}"
          span {{segment.title}}
    div id="collapse{{segment.id}}" class="panel-collapse collapse in"

我实际上试图实现的是将对象数据插入到HTML属性中。我一直在尝试{{segment.id}}，但这会呈现一些脚本标记和值，这不是我要找的。还有别的办法吗？

Answer 1

在HTMLBars发布之前，Ember.js将需要插入占位符标记来操作DOM。你有两个选择：

1. 创建一个将为您连接字符串的计算属性，然后使用bind-attr将该属性应用于ID或类。
2. 使用解束缚帮手。这将做您想做的事情，但是如果它改变了，它将不会更新属性。

如果你能的话，我建议你先做。

Answer 2

如果数据不发生变化，您可以使用unbound，它会在没有脚本标记的情况下将其塞入其中。

each segment in controller
  .panel.panel-default
    .panel-heading
      h4.panel-title
        a data-parent="#accordion" data-toggle="collapse" href="#collapse{{unbound segment.id}}"
          span {{segment.title}}
    div id="collapse{{segment.id}}" class="panel-collapse collapse in"