2

I have the following code in an Emblem.js template:

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"

What I'm actually trying to achieve is to interpolate object data into the HTML attributes. I been trying to {{segment.id}} but that render some script tags along with the value which is not what I'm looking for. Is there another way to do this?.

Luis D Urraca
  • 2,024
  • 4
  • 24
  • 46

2 Answers2

3

Until HTMLBars comes out, Ember.js is going to need to insert placeholder tags to manipulate the DOM. You have two options:

  1. Create a computed property that will join the strings for you, then use bind-attr to apply the property to the ID or class.
  2. Use the unbound helper. This will do what you want, but it won't update the property if it changes.

I suggest doing the first if you can.

GJK
  • 37,023
  • 8
  • 55
  • 74
1

if the data isn't going to change, you can use unbound and it'll just jam it in there without script tags.

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"
Kingpin2k
  • 47,277
  • 10
  • 78
  • 96