Ember.js: How to bind event handler to dom element? - ember.js

Question

I'm using the jquery plugin scrollTo to create buttons to 'jump' to particular items in a long list. I bet there is a way to loop through each item and bind the event to it's corresponding button, but I don't know how to approach that. Sounds like something that would occur in the view though...
How can I bind a jQuery event to each 'item' rendered in the ember template below?
Ember 'items' template
<div class="buttons">
{{#each}}<a href="#" {{bindAttr class="isActive slug"}}></a>{{/each}}
</div>
<section class='region region-main-upper clearfix items'>
{{#each}}
<div {{bindAttr class=":postcard-left :item isActive slug"}}>
<div><img class='img-polaroid' {{bind-attr src=image}}></div>
<div>
<h4>{{title}}</h4>
<div class="span2">
<span class="item-property clear-row">Cost: {{printUSD itemCost}}</span>
<span class="item-property clear-row">Percent: {{percentVec}}%</span>
</div>
{{render 'options' options}}
</div>
</div>
{{/each}}
</section>
Straight javascript
This works, but is undesirable:
(function($){
$(document).ready(function() {
// this does what I am trying to achive, but is not maintainable...
$( "body" ).on( "click", ".solar", function(e) {
$('.items').stop().scrollTo( '.item.solar', 800 );
e.preventDefault();
});
$( "body" ).on( "click", ".coal", function(e) {
$('.items').stop().scrollTo( '.item.coal', 800 );
e.preventDefault();
});
});
})(jQuery);