Ember.js子路由未渲染且父路由同时被调用的问题

Question

I'm having an issue getting the template to display after the route changes. The log states that I've transitioned into form.newrecord but the template isn't rendering.

Routers:

App.Router.map(function(){
    this.resource('home', { path: '/' });
    this.resource('form', { path: '/forms/:form_id' }, function() {
        this.route('newrecord', { path: '/newrecord' });
    });
});

App.FormNewRecordRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render("form/newrecord", { 
            into: "application",
            outlet: "newrecord"
     })}
});

Templates:

<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
    {{outlet newrecord}}
</script>

<script type="text/x-handlebars" data-template-name="home">
    <h1>Test</h1>
</script>

<script type="text/x-handlebars" data-template-name="form">
    <h1>Test 2</h1>
</script>

<script type="text/x-handlebars" data-template-name="form/newrecord">
    <h1>This is a test</h1>
</script>

Answer 1

Hum, perhaps there is just a naming issue here.

You have defined App.FormNewRecordRoute (with capital R) and this.route('newrecord') with lower r. Try to make them consistent to see if it works.

Answer 2

Yep, it's definitely a capitalization issue. Just switch to this and you should be fine : App.FormNewrecordRoute

JSBin : http://jsbin.com/ucanam/1100/edit