Links to ember.js with interactive links inside an interactive div

Question

I found some answers for this particular jQuery but nothing related to Ember.Js. I'm new to Ember, so I might miss something obvious, so I feel bad if so.

I created an interactive div using an action inside my controller:

goHere: function(article) { this.transitionTo('view-article',{article_id: article.article_id}); } 

But now my bindings inside this div are not working. Any idea how to get around this?

EDIT: I can’t show you all the code because it is a huge project, but basically we have Themes, each topic has a series of articles. Articles are listed on the home page as follows:

 <div class="article pull-left span10"{{action goHere this}} > ... <a href="url.com">XX</a> ... </div> 

And this snap tag when clicked triggers a goHere action trigger instead of redirecting to url.com

Answer 1

Try

 goHere: function(article) { this.transitionToRoute('view-article',article); } 

If this does not work, jsbin / jsfiddle will be useful for a larger context.

See: http://emberjs.com/api/classes/Ember.Controller.html#method_transitionToRoute

Answer 2

The use of the transition to the controller is deprecated, but it should work with a wear warning. Using transitionToRoute (as in @RyanHirsch's answer) is the right way to do this.

You can better use linkTo helper

  {{#linkTo 'view-article' model_to_be_passed}}Go to View Article {{/linkTo}} 

Answer 3

In my case, I used user-entered links that were turned into rails_autolink anchor tags on the server, so I could not replace the links with ember link-to.

I was able to get around this with a few steps. First, I added the autolink class to all the links that I generated using autolink. Then in the Ember action for the surrounding div, I did:

 if event.target.className == 'autolink' @send('handleAutolink') else // (handle non-link click) 

Then on ApplicationRoute I put a handler for the handleAutolink action, which basically cancels the ember action and opens a link with javascript:

 handleAutolink: -> event.preventDefault() window.open(event.target.href, '_blank') 

I understand that this is probably a giant hack, but I would be glad to hear a different approach!