如何在路由器v2中为路由呈现多个模板 [英] How to render multiple templates for a route in Router v2

问题描述

我的索引模板有两个出口，一个用于标题，另一个用于内容。内容中的模板根据正在查看的内容而变化。

在旧路由器中，可以通过调用 connectOutlet 在拥有该模板的不同控制器上。我不知道如何在新路由器上做同样的事情。

任何建议？

解决方案

通过我的研究，我来到这里：
说你有一个这样定义的路由器：

 code> App.Router.map（function（match）{
 match（'/'）。to（'index'）; 
}）; 
  

ApplicationTemplate：

 code>< script type =text / x-handlebars> 
 {{outlet header}} 
 {{outlet}} 
< / script> 
  

IndexTemplate：

 code>< script type =text / x-handlebarsdata-template-name =index> 
 {{outlet dashboard}} 
 {{outlet spaces}} 
< / script> 
  

现在，我们想要的是当用户进入索引路由器时，页面应该是： p>

• 将索引转化为主要插槽，将标题标题插入应用程序模板的标题插槽。


• 渲染仪表板，空格模板为了达到这个目的，我们在indexRoute中写下面的代码。
  
  
  
  $ b

    App.IndexRoute = Em.Route.extend（{
   renderTemplate：function（controller，model）{
   //将标题插入标题插座
   this.render（'header'，{
   outlet：'header'
  }）; 
   //渲染索引到主要插槽如果你注释掉
   //这行，下面的代码失败
   this.render（'index'）; 
   
   //通过使用into，我们可以渲染到索引模板
   //注意：控制器是optional.if未指定，
   // ember为给定的模板拾取控制器。 
   this.render（'dashboard'，{
   outlet：'dashboard'，
   into：'index'，
   controller：this.controllerFor（'somethingElse'，App.TestModel .find（））
  }）; 
   //控制器是SpacesController 
   this.render（'spaces'，{
   outlet：'spaces'，
   into：'index'
  }）; 
  } 
  }）; 
    

  
  

  my index template has two outlets, one for header, another for content. the template rendered in the content changes depending on the content being viewed.

  In the old router, this could be done by calling connectOutlet on different controllers who owned that template. I can't figure out how to do the same in the new router.

  any suggestions?

  解决方案

  With my research, I came to this: Say you have a router defined like this:

  App.Router.map(function(match) {
    match('/').to('index');
  });
  

  ApplicationTemplate:

  <script type="text/x-handlebars">
  {{outlet header}}
  {{outlet}}
  </script>
  

  IndexTemplate:

  <script type="text/x-handlebars" data-template-name="index">
  {{outlet dashboard}}
  {{outlet spaces}}
  </script>
  

  Now, What we want is that when user goes to the index router, the page should:

  • Render index into main outlet and header into header outlet of application template.
  • render dashboard, spaces template into Index Template.

  To achieve this, we write the following code in indexRoute

  App.IndexRoute = Em.Route.extend({
      renderTemplate: function(controller, model){
          //Render header into header outlet
          this.render('header',{
              outlet:'header'
          });
          //Render index into main outlet. If you comment out 
          //this line, the code below fails
          this.render('index');
  
          //by using into, we can render into the index template
          //Note: The controller is optional.if not specified,
          //ember picks up controller for the given template.
          this.render('dashboard',{
              outlet:'dashboard',
              into:'index',
              controller:this.controllerFor('somethingElse', App.TestModel.find())
          });
          //controller is SpacesController
          this.render('spaces',{
              outlet:'spaces',
              into:'index'
          });
      }
  });
  

  这篇关于如何在路由器v2中为路由呈现多个模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！