Emberjs - real time changes not working?

Question

I've followed the tutorial of one of the creators of Emberjs: http://www.youtube.com/watch?v=Ga99hMi7wfY The goal of tutorial is to present basics of emberjs on an example, where there's a list of posts and if you edit one, the content gets mapped to the corresponding textarea or textfield. Then, the changes are visible in real time.

This, however, doesn't work. And I've been following the official tutorial (obviously, emberjs has changed a lot since this yt video).

Anyways, what am I missing?

Here's my code (HTML):

  <script type="text/x-handlebars">
<div class="navbar">
    <div class="navbar-inner">
        <a class="brand" href="#">Bloggr</a>
        <ul class="nav">
            <li>{{#linkTo 'posts'}}Posts{{/linkTo}}</li>
            <li>{{#linkTo 'about'}}About{{/linkTo}}</li>
        </ul>
    </div>

    {{outlet}}
</div>  
</script>

<script type="text/x-handlebars" id="about">
<div class="about">
    random text about
</div>  
</script>

<script type="text/x-handlebars" id="posts">

{{#if isEditing}}
    {{partial 'post/edit'}}
    <button {{action 'save'}}>Done</button>
{{else}}
    <button {{action 'edit'}}>Edit</button>
{{/if}}
<div class="about">
    <table>
        <tr>
            <th>Id</th>
            <th>Title</th>
            <th>Author</th>
            <th>Date</th>
            <th>Utilities</th>
        </tr>
        {{#each model}}
            <tr>
                <td>{{id}}</td>
                <td>{{title}}</td>
                <td>{{author}}</td>
                <td>{{publishedAt}}</td>
                <td>{{#linkTo "post" this}}Details{{/linkTo}}</td>                  
            </tr>
        {{/each}}
    </table>
</div>  
<div>
    {{outlet}}
</div>
</script>

<script type="text/x-handlebars" id="post/_edit">
<p>{{view Ember.TextArea valueBinding="title" placeholder="test.."}}</p>
<p>{{view Ember.TextField valueBinding="author"}}</p>
</script>

<script type="text/x-handlebars" id="post">
  <h1>{{title}}</h1>
  <h2>by {{author}}</h2>
  <small>{{date publishedAt}}</small>
</script>

This is the emberjs part:

    App = Ember.Application.create();

    App.Store = DS.Store.extend({
        revision: 12,
        adapter: 'DS.FixtureAdapter'
    });

    App.Router.map(function(){
        this.resource("posts", function(){
            this.resource("post", { path: ':post_id'});
        });
        this.resource("about");
    });

    App.PostsRoute = Ember.Route.extend({
        model: function(){
            return App.Post.find();
        }
    });

    App.PostsController = Ember.ObjectController.extend({
        isEditing: false,
        edit: function(){
            this.set("isEditing", true);
        },
        save: function() {
            this.set("isEditing", false);
        }
    });

    App.Post = DS.Model.extend({
        title: DS.attr('string'),
        author: DS.attr('string'),
        publishedAt: DS.attr('date')
    });

    App.Post.FIXTURES = [
        {
            id:1,
            title: "This is my title",
            author: "John Doe",
            publishedAt: new Date('12-27-2012')
        },
        {
            id:2,
            title: "This is another title",
            author: "Jane Doe",
            publishedAt: new Date('02-03-2013')
        }
    ];

    Ember.Handlebars.registerBoundHelper('date', function(date){
        return date.getFullYear();
    });

Answer 1

@wedens is right you have a wrongly named controller for the single post, you should also check out this github repo which contains the (correct) source code for that example app build in the video.

Answer 2

Name of controller should be PostController instead of PostsController. They are responsible for handling different routes.