我的应用程序模板,滑块区域和预页脚中有2个命名插座.有没有办法将带有参数的视图组件(如索引模板中显示的主滑块组件)传递给指定的插座？所以我需要将{{main-slider sliders = filteredSlider}}传递到索引模板中的插座{{outlet“slider-area”}}？
我来自rails如此,请原谅我的想法,如果这不是ember的做法.可以在应用程序模板中指定yield：slider_area,然后在content_for：slider_area块中包装此区域的任何内容.在ember中有类似的方法吗？
的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")
});
}
});
解决方法
好吧,所以我有一个解决这个问题的方法,而不是试图将模板中的视图组件传递给特定的插座(rails上的ruby),关键是要创建一个模板,而不是一个组件,并从在通往特定出口的路线内.
从Route渲染时,滑块模板可以访问Routes控制器范围内的所有函数,因此我们将在所有将使用此模板的控制器中普遍命名函数/参数,并且我们的动态参数应该可以工作.
所以在IndexRoute下面我们定义了我们发送给控制器的数据,滑块,我们还指定我们想要使用this.render();在默认插座中渲染普通内容,然后我们将共享滑块模板渲染到名为outlet“slider-area”.然后在我们的控制器中,我们将模型数据过滤到我们的规范,并在所有使用此功能的控制器上将此功能命名为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>
