将带有参数的视图组件渲染到名为outlet的ember.js中
我在我的应用程序模板， slider-area和pre-footer有2个指定插座。 有没有一种方法可以将视图组件传递给一个指定的出口，如同在索引模板中显示的main-slider组件那样传递参数？ 所以我需要将{{main-slider sliders=filteredSlider}}传递给索引模板中的插座{{outlet "slider-area"}} 。
我来自铁轨，所以原谅我的想法，如果这不是多么肮脏。 可以在应用程序模板中指定yield :slider_area ，然后在content_for :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>
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")
});
}
});
好的，所以我有一个解决这个问题的方法，而不是试图将模板中的视图组件传递到特定的出口（ruby on rails方式），关键是创建一个模板而不是组件，并且从在特定出路的路线内。
从Route中呈现时，滑块模板可以访问Routes控制器范围内的所有函数，所以我们在所有将使用此模板的控制器中通用地命名空间函数/参数，并且我们的动态参数应该可以工作。
因此，在IndexRoute的下面我们定义了我们发送给控制器的数据， sliders ，我们还指定我们想要使用this.render();在默认出口渲染普通内容this.render(); ，然后我们将我们的共享滑块模板渲染到指定的出口“滑块区域”。 然后在我们的控制器中，我们将模型数据过滤为我们的规格，并且我们将这个功能的BatterySliders命名为使用此功能的所有控制器。
app.js
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="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>
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>
上一篇: Render view component with parameters into named outlet ember.js