CODEWITHSUNDEEP
javascriptjqueryember.jsemblem.js
user1717344
user1717344

Reputation: 133

Passing Data From Ember Into HTML in an Emblem Template

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!

Upvotes: 0

Views: 593

Answers (1)

DaMainBoss
DaMainBoss

Reputation: 2003

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

Upvotes: 2

Related Questions