Question

鉴于我目前的路由器地图：

App.Router.map(function() {
  this.route('category')

  this.route('about')
  this.route('contact')
});

对于about和contact路由，默认情况下需要通过应用程序插座呈现这些路径。但是，对于category路由，我需要它使用它自己的模板，而无需通过应用程序插座。

如果这不可能并且使用应用程序视图是必要的，我将如何构建我的应用程序以使{{render "header"}}嵌套在介绍div中 - 但仅限于类别路径（而其他路径）会使用应用程序模板）？

有关更好的解释，请参阅my jsbin。

＆＃13;

App = Ember.Application.create();

App.Router.map(function() {
  this.route('category')
  
  this.route('about')
  this.route('contact')
});


App.Category = Ember.Route.extend({
  renderTemplate: function(){
    
    // render without application outlet?
    
  }
});

＆＃13;

/* Put your CSS here */
html, body {
  margin: 20px;
}


.intro {
  background: #F09819;
  padding: 20px;
  margin-top: 20px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ember Starter Kit</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.8.0/ember.js"></script>
</head>
<body>

  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>
    
    {{render "header"}}

    {{outlet}}
  </script>

  
   <script type="text/x-handlebars" data-template-name="header">
    {{link-to 'category' 'category'}}
    {{link-to 'about' 'about'}}
    {{link-to 'contact' 'contact'}}
  </script>
  
  
  <script type="text/x-handlebars" data-template-name="category">
      <div class="intro">
         {{render "header"}}
         
         <h2>Categories!</h2>
      </div>
  </script>

  
  <script type="text/x-handlebars" data-template-name="about">
    <h2>About</h2>
  </script> 
  
  <script type="text/x-handlebars" data-template-name="contact">
    <h2>Contact</h2>
  </script>
  
  
</body>
</html>

＆＃13;

Answer 1

您可以在路线中使用renderTemplate方法告诉余烬渲染视图的位置。默认情况下，ember会将其渲染到＆＃34;默认＆＃34;中的父模板中。出口。

在您的情况下，您可以执行以下操作：

App.CategoryRoute = App.Route.extend({
  renderTemplate: function() {
    this.render('favoritePost', {   // the template to render
      into: 'posts',                // the template to render into
      outlet: 'posts',              // the name of the outlet in that template, if you omit this property it would be the "default"
    });
    //cal as many renders as you want
  }
});

从docs起，this也可以派上用场。

希望它有所帮助！

不同路线的不同应用模板

1 个答案: