CODEWITHSUNDEEP
ember.jshandlebars.jsember-old-router
colinkahn
colinkahn

Reputation: 97

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

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/

Upvotes: 2

Views: 463

Answers (1)

MilkyWayJoe
MilkyWayJoe

Reputation: 9092

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

Upvotes: 1

Related Questions