JSFiddle - React, Tailwind, and code Playground

by rlivsey

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://raw.github.com/gist/2917574/f21f5cc2cd7899b4fc1969d0eecdb3b002249e98/ember.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>Action HREF not using correct context</h1>
    
    <div class="navigation">
        <a {{action goHome href=true}}>Home</a>        
        --
        Latest Posts:
        {{#each post in controller.controllers.postsController}}
            <a {{action viewPost context="post" href=true}}>{{post.title}}</a></li>
        {{/each}}    
    </div>
    
    <div class="content">
       {{outlet}}    
    </div>
    
</script>

<script type="text/x-handlebars" data-template-name="home">
    <h2>Home</h2>
    
    <p>
       Click one of the posts above.
    </p>
</script>

<script type="text/x-handlebars" data-template-name="post">
    <h2>Post: {{content.title}}</h2>
    
    <p>
       Notice that the links below now have incorrect href attribute pointing to this post instead.
    </p>
    
    <p>
      Clicking them takes you to the right state, although with the transitions not doing e.preventDefault() it'll take you right back here. See the ones below without href=true to verify.
    </p>
    
    <p>
       If you reload the page then you'll see the same issue with the "latest posts" links at the top of the page.
    </p>
    
    <h3>Other posts</h3>
    
    <p>
        (with href=true)
        {{#each post in controller.controllers.postsController}}
            <a {{action viewPost context="post" href=true}}>{{post.title}}</a></li>
        {{/each}}
    </p>
    
    <p>
        (without href=true)
        {{#each post in controller.controllers.postsController}}
            <a {{action viewPost context="post"}}>{{post.title}}</a></li>
        {{/each}}    
    </p>
</script>

CSS

body {
  padding: 2em;   
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }

a {  
  color: blue;
  cursor: pointer;
}

.content {
   padding: 1em;
}

p {
    margin: 1em 0;
}

.info {
    padding-top: 1em;
}

.latest-posts {
    
}

.navigation {
    border-bottom: 1px solid #CCC;
    padding: 1em;
}

JavaScript

App = Em.Application.create();

App.ApplicationController = Em.Controller.extend();
App.ApplicationView       = Em.View.extend({ templateName: 'application' });

App.HomeView = Em.View.extend({templateName: 'home' });

App.PostController = Em.ObjectController.extend({})
App.PostView = Em.View.extend({templateName: 'post' });

// fake ember data
App.Post = Ember.Object.extend();

var post1 = App.Post.create({id: "123", title: "Post One"});
var post2 = App.Post.create({id: "234", title: "Post Two"});

var posts = [post1, post2];

App.Post.reopenClass({
    find: function(id) {
       return posts.find(function(post){ return post.get("id") == id;});
    }    
});

App.PostsController = Em.ArrayController.extend({
    content: posts
});

App.Router = Em.Router.extend({
    enableLogging: true,
    location: 'hash',
    
    root: Em.State.extend({

        goHome: Ember.State.transitionTo('home'),
        viewPost: Ember.State.transitionTo('post'),
      
        // STATES
        home: Em.State.extend({
            route: '/',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet(App.HomeView);
            }
        }),
      
        post: Em.State.extend({
            route: '/post/:post_id',
            
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet(App.PostView, context);
            }
        })
    })
});

App.initialize();