Javascript 将带有参数的视图组件渲染到命名的outlet ember.js中

我的应用程序模板中有两个指定的出口，

滑块区域

和

页脚前

。是否有方法将采用参数的视图组件（如索引模板中显示的

主滑块

组件）传递到指定的出口？所以我需要将

{{main sliders sliders=filteredSlider}}

传递到索引模板中的outlet

{{{outlet“slider area}}

我来自rails，所以请原谅我的想法，如果余烬不是这样做的。可以在应用程序模板中指定

yield:slider\u area

，然后将此区域的任何内容包装到

content\u for:slider\u area

块中。在余烬中是否有类似的方法

index.html

<script type="text/x-handlebars" data-template-name="application">
  {{panasonic-topbar}}
    <div id="batterywrap">
      {{outlet "slider-area"}}
        <div class="index_contents">
          <div class="index_contents_inner">
        <div class="main_area">
          {{outlet}}
        </div>
          </div>
       </div>
     </div>
  {{panasonic-footer}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  # Something like {{outlet "slider-area" render main-slider sliders="filteredSlider}} ?
  {{main-slider sliders=filteredSlider}}
  {{partial "social_footer"}}
</script>

<script type="text/x-handlebars" data-template-name="slider">
        {{panasonic-navigation tagName="div" classNames="gnavi_area"}}
        <div class="slider_wrap">
            <div id="slider" class="main_slider">
            {{#each slider in batterySliders}}
                <div class="slider_area slider0{{unbound slider.id}} {{unbound slider.background}}">
                    <div class="slider_inner">
                        <div class="inner0{{unbound slider.id}}">
                            <img {{bind-attr src="slider.image" alt="slider.image"}} class="nosp"/>
                            <img {{bind-attr src="slider.sm_image" alt="slider.sm_image"}} class="sp"/> 
                        </div>
                    </div>
                </div>  
            {{/each}}               
            </div>
        </div>
    </script>

---

好的，我有一个解决方案来解决这个问题，而不是试图将模板中的视图组件传递到特定的出口（ruby on rails方式），关键是创建一个模板，而不是组件，并从路由到特定的出口呈现它

从Route渲染时，滑块模板可以访问Routes控制器范围内的所有函数，因此我们在将使用此模板的所有控制器上通用地命名函数/参数，并且我们的动态参数应该可以工作

因此，在下面的IndexRoute中，我们定义了发送给控制器的数据，

滑块

，我们还指定要使用

this.render（）在默认出口中呈现正常内容，然后我们将共享滑块模板渲染到命名的outlet“slider area”中。然后在我们的控制器中，我们将模型数据过滤到我们的规范中，并在所有使用此功能的控制器中将此函数命名为batterySliders

app.js

App.IndexController = Ember.ObjectController.extend({
    filteredSlider: function(){
      return this.get('sliders').filterBy('page', 'index');
    }.property('sliders.@each.page')
});

App.IndexRoute = Ember.Route.extend({
    model: function() {
      return Ember.RSVP.hash({ 
        sliders: this.store.find("slider")
      });
    }
});

App.IndexController = Ember.ObjectController.extend({
    batterySliders: function(){
        return this.get('sliders').filterBy('page', 'index');
    }.property('sliders.@each.page')
});

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return Ember.RSVP.hash({ 
            sliders: this.store.find("slider"),
        });
    },
    renderTemplate: function(){
        this.render();
        this.render("slider", {outlet: "slider-area"});
    }
});

index.html

<script type="text/x-handlebars" data-template-name="application">
  {{panasonic-topbar}}
    <div id="batterywrap">
      {{outlet "slider-area"}}
        <div class="index_contents">
          <div class="index_contents_inner">
        <div class="main_area">
          {{outlet}}
        </div>
          </div>
       </div>
     </div>
  {{panasonic-footer}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  # Something like {{outlet "slider-area" render main-slider sliders="filteredSlider}} ?
  {{main-slider sliders=filteredSlider}}
  {{partial "social_footer"}}
</script>

<script type="text/x-handlebars" data-template-name="slider">
        {{panasonic-navigation tagName="div" classNames="gnavi_area"}}
        <div class="slider_wrap">
            <div id="slider" class="main_slider">
            {{#each slider in batterySliders}}
                <div class="slider_area slider0{{unbound slider.id}} {{unbound slider.background}}">
                    <div class="slider_inner">
                        <div class="inner0{{unbound slider.id}}">
                            <img {{bind-attr src="slider.image" alt="slider.image"}} class="nosp"/>
                            <img {{bind-attr src="slider.sm_image" alt="slider.sm_image"}} class="sp"/> 
                        </div>
                    </div>
                </div>  
            {{/each}}               
            </div>
        </div>
    </script>


{{panasonic navigation tagName=“div”classNames=“gnavi_area”}
{{{#电池滑块中的每个滑块}
{{/每个}}

application.html

<script type="text/x-handlebars" data-template-name="application">
    {{panasonic-topbar}}
    <div id="batterywrap">
        <div class="content_head">
            {{outlet "slider-area"}}
        </div>  
        <div class="index_contents">
            <div class="index_contents_inner">
                <div class="main_area">
                    {{outlet}}
                </div>
            </div>
        </div>
    </div>
    {{panasonic-footer}}
</script>


{{松下topbar}}
{{出口“滑块区域”}
{{outlet}}
{{panasonic footer}}