Ember.js模板渲染

Question

我可能在閱讀錯誤的文檔。有人可以請check out my gist並告訴我爲什麼invoices/index模板沒有渲染？

當我讀到the ember.js docs它指出它應該呈現

posts 
↳posts/index 

（在我的情況invoices/index）。但invoices模板呈現。

把手：

<script type="text/x-handlebars" data-template-name="application"> 
    <h1>Ember Committers</h1> 
    <nav> 
     {{#linkTo "index"}}Index{{/linkTo}} 
     {{#linkTo "about"}}About{{/linkTo}} 
     {{#linkTo "invoices"}}Invoices{{/linkTo}} 
    </nav> 
    {{ outlet }} 
</script> 

<script type="text/x-handlebars" data-template-name="invoices"> 
    <h1>Invoices</h1> 
</script> 

<script type="text/x-handlebars" data-template-name="invoices/index"> 
    <ul> 
     {{#each invoice in invoices }} 
     <li>{{#linkTo "show" invoice.id}}{{ invoice.id }}{{/linkTo }}</li> 
     {{/each }} 
    </ul> 
</script> 

<script type="text/x-handlebars" data-template-name="invoices/show"> 
    <p>Invoice - {{ name }}</p> 
</script> 

<script type="text/x-handlebars" data-template-name="phone"> 
    <p>Contributor - {{ title }}</p> 
</script> 

<script type="text/x-handlebars" data-template-name="about"> 
    <p>About {{ title }}</p> 
</script> 

<script type="text/x-handlebars" data-template-name="index"> 
    <p>Index</p> 
</script> 

的JavaScript：

<script type="text/javascript" defer> 
    var App = Ember.Application.create({ 
     LOG_TRANSITIONS: true 
    }); 
    App.ApplicationView = Ember.View.extend({ 
     templateName: 'application' 
    }); 

    App.Router.map(function() { 
     this.route("about"); 
     this.resource("invoices", { path: "/invoices" }, function() { 
      this.resource("show", { path: "/:id" }); 
     }); 
    }); 

    var invoices = [ 
     {id: 1}, 
     {id: 2} 
    ]; 

    App.AboutRoute = Ember.Route.extend({ 
     setupController: function (controller) { 
      // Set the IndexController's `title` 
      controller.set('title', "My App"); 
     } 
    }); 

    App.InvoicesIndexController = Ember.ArrayController.extend({ 
     invoices: invoices 
    }); 

</script> 

Answer 1

您需要在您的invoices模板的{{outlet}}標籤。由於index和show是invoices的嵌套資源，因此它們的模板會在您在invoices模板中指定的出口內呈現。

查看Ember.js指南的nested resources部分。