Ember application using Router not working with {{action}} handlebars tag

Question

I'm making a simple Ember application that takes some Tumblr json, lists the posts, and then lets you go to a post detail view with a link back to default posts view.

The issue right now is that when using the {{action}} handlebars template tag the link back to the 'showHome' route doesn't work, and the 'showPost' action shows the last post in the json instead of the one specified as the context in the action tag.

Here are my templates:

<script type="text/x-handlebars" data-template-name="main-tmpl">
    <h1>
        <a {{action showHome}}>{{view.content.title}}</a>
    </h1> 
    {{&view.content.description}} 
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="post-tmpl">
    {{#if view.content.is_photo }}
        {{#if view.detail }}
            <img {{bindAttr src="view.content.photo-url-500"}}>
        {{else}}
            <a {{action showPost view.content href=true}} class="thumbnail">
                <img {{bindAttr src="view.content.photo-url-75"}}></a>
        {{/if}}
    {{/if}}
</script>

Here are my routes:

App.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        showHome:Ember.Route.transitionTo('index'),
        showPost:Ember.Route.transitionTo('postDetail'),
        loading: Em.Route.extend({
            connectOutlets: function(router, context){
                router.get('applicationController').connectOutlet('loading', context)                
            }
        }),
        index: Em.Route.extend({
            route: '/',
            deserialize:function(router, params) {
                var deferred = jQuery.Deferred(),
                    resolve = function() { console.log("resolved"); deferred.resolve() }

                /* Cut for brevity [...] */

                return deferred.promise()
            },
            connectOutlets:function(router) {
                router.get('applicationController').connectOutlet('tumbleLog')
                router.get('tumbleLogController').connectOutlet('posts')
            }
        }),
        postDetail:Em.Route.extend({
            route:'/post/:id',
            connectOutlets:function(router,post) {
                        console.log('my post is', post)
                router.get('tumbleLogController').connectOutlet('postDetail', post)
            }
        })
    })
})

And here's the fiddle: http://jsfiddle.net/colinkahn/PegYL/

That was it, changed it to ember-latest and everything is working. Thanks! — colinkahn, Oct 25 '12 at 02:53
@MilkyWayJoe you should post your comment as a answer so it can be accepted. — Luke Melia, Oct 25 '12 at 04:55
Also, using enableLogging:true might be a good idea in routing debugging. You can set this just before the 'root:...'. When using this, you will see the statemanager's logging in the console, which can be quite helpful. — Eduárd Moldován, Oct 25 '12 at 08:01

score 1 · Accepted Answer · answered Oct 25 '12 at 13:50

I don't know weather this can count as the answer, but like I said in the comments, as of today (October 25th of 2012) this can be solved by replacing ember-1.0-pre with ember-latest, since 1.0-pre has known bugs which are being fixed on latest. Also, like Eduard mentioned, while in development it's always a good idea to have enableLogging set to true in your router so you know what's going on. Peace

Ember application using Router not working with {{action}} handlebars tag

1 Answers1