0

Bear with me because I'm new to Ember, and I'm working with ember.js and I'm trying to pass a model id in an HTML attribute so that jQuery can recognize it has an id. So, I'm doing this in an emblem template:

each step in steps
      tr
        td = step.position
        td = step.name
        td = step.address
        td
          a href='#' style='display:inline-block;' data-reveal-id="reviews_modal_#{step.id}" class='photos_link' Reviews

step is an ember object/model and I'm trying to reference it by giving it an id "data-reveal-id="reviews_modal_#{step.id}"...

After inspecting the element in Chrome, this is what is returned:

<a href="#" style="display:inline-block;" data-reveal-id="reviews_modal_&lt;script id='metamorph-13-start' type='text/x-placeholder'&gt;&lt;/script&gt;1&lt;script id='metamorph-13-end' type='text/x-placeholder'&gt;&lt;/script&gt;" class="photos_link">Reviews</a>

Note that it seems to be passing the correct step.id (1) but also passing lots of ember script tags as well, which isn't what I want.

So my quick question is: how can I use the step.id property in an HTML attribute so that I can uniquely identify that tag with jQuery?

Thanks for your help -- I'm quite an Ember newbie!

user1717344
  • 133
  • 1
  • 8
  • 1
    You can define a computed property in the [`itemController`](http://stackoverflow.com/questions/16265256/emberjs-how-to-update-model-attributes/16265645#16265645) and then use the property with the `{{bindAttr}}` helper like `{{bindAttr data-reveal-id=a_computed_property_that_returns_your_text}}` – MilkyWayJoe May 07 '13 at 15:03

1 Answers1

2

Have a look at bindAttr. In your controller, you can define a property that returns whatever you want the attribute to be. In your template you can then say {{bindAttr data-reveal-id="propertyName"}}

Something like:

App.PostController = Ember.Controller.extend({
  title: "the title"
});

and in your template

{{#each post in posts}}
    <section {{bindAttr id="title"}} >   
        <!-- blah blah blah -->     
    </section>
{{/each}}

Silly example but you get the gist.

UPDATE: Just as a side note, the title property could be an attribute on your model too. Remember Ember checks in this way Controller -> Model -> Router. If you want to use a property defined in a view, then use view.property

DaMainBoss
  • 2,035
  • 1
  • 19
  • 26
  • Although this seems fine, be careful when binding to the `id` attribute. `data-*` is usually a better option with Ember. – MilkyWayJoe May 07 '13 at 18:24
  • Okay, this is helpful. Thanks for your advice. But how would you reference the id of step in the controller. For example, the tour object has many steps, i.e. tour.steps. Each step has an id. How would I be able to reference those steps and those ids in the controller? Thanks. – user1717344 May 08 '13 at 18:28
  • Fail: was trying to write emblem in the comment. Anyway, check out this gist for how you right this in emblem: https://gist.github.com/machty/2b2694c2c718a1481b70 – Alexander Wallace Matchneer Jun 12 '13 at 19:51