Bug navigation view refresh - smaller

by MikeAski

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="app_view">
    {{outlet menu}}
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="menu_view">
    {{#each keywords}}
    <button class=":btn" {{action "showParameters" }}>{{name}}</a> 
    {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="empty_view">
    No selection, please, select an element.
</script>

<script type="text/x-handlebars" data-template-name="keyword_view">
        <div>
            Keyword name &nbsp;{{view Ember.TextField id="keyword-name" valueBinding="content.name"}}
        </div>

        <div>
            <ol>
            {{#each content.parameters}}
                <li>
                <div class="inline-block">
                    {{view Ember.TextField valueBinding="symbol"}}
                    </div>
                </li>
            {{/each}}
            </ol>
            <button class=":btn" {{action "addKeywordParameter"}}>+ Add Parameter</a>
        </div>
</script>

CSS

a:hover {color:#FF00FF;}

JavaScript

App = Ember.Application.create();
App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
    templateName: 'app_view'
});

App.Keyword = Ember.Object.extend({
    name:'no name'});

App.MenuController = Ember.Controller.extend({
    keywords:null,
    init:function(){
        this._super();
        this.set('keywords',[]);
        var p1 = App.Keyword.create({name: "keyword1", parameters: []});
        var p2 = App.Keyword.create({name: "keyword2", parameters: []});
        this.get('keywords').pushObject(p1);
        this.get('keywords').pushObject(p2);
    }
});

App.Parameter = Ember.Object.extend({
    symbol:'new symbol',
    parameters: null
});

App.MenuView = Ember.View.extend({
    templateName: 'menu_view'   
});

App.EmptyController = Ember.Controller.extend({
});

App.EmptyView = Ember.View.extend({
    templateName: 'empty_view'   
});

App.KeywordView = Ember.View.extend({
    templateName: 'keyword_view'
});

App.KeywordController = Ember.Controller.extend({});

App.Router = Ember.Router.extend({
    initialState: 'root',
    enableLogging: true,
            
    states: {
        root: Ember.Route.extend({
            ready: function(router) {
            },
            
            index: Ember.Route.extend({
                route: '/',
                enter: function(router) {
                    Ember.run.next(function(){     
                        router.transitionTo(['keywords'], ['index']);
                    });
                }
            }),
            
            keywords: Ember.Route.extend({
                route: 'keywords',
                
                connectOutlets: function(router){
                    var applicationController = router.get('applicationController');                          
                    applicationController.connectOutlet({
                        outletName: 'menu',
                        name: 'menu'
                    });
                },
        ...