Ember.js Unable to find view at path when returning to route

Question

I have a simple example ember.js app and I want to include a view on the index template.

This works for the initial render.

When I link to a second route and return back to the original I get the error Unable to find view at path 'App.testView'

Example code: JSFiddle

The HTML page...

<div id="test"></div>

<script type="text/x-handlebars">
    <h1>Test Layout</h1>
    {{outlet}}        
</script>

<script type="text/x-handlebars" data-template-name="index">
    <h2>Index Template</h2>
    <p>{{#linkTo test}}test route{{/linkTo}}</p>
    <div>{{view App.testView}}</div>    
</script>

<script type="text/x-handlebars" data-template-name="test">
    <h2>Test Template</h2>
    <p>{{#linkTo index}}index route{{/linkTo}}</p>        
</script>

<script type="text/x-handlebars" data-template-name="testview">
    <p>Test View</p>
</script>

The Javascript...

window.App = Ember.Application.create();

App.Router.map(function() {
    this.route("test");
});

App.testView = Ember.View.create({
    templateName: 'testview'
});

Answer 1

Fixed JSFiddle

Using Ember.View.extend instead of Ember.View.create will fix this issue.

According to the Ember API for the {{view}} helper you need to pass it a class, not an instance. The helper will create a new instance of the View and insert it.

Answer 2

one simple syntax mistake am able to identify is path attribute not added. Update the code Router.map() with this

App.Router.map(function() {
    this.route("test",{path:"/"});
});