将带有参数的视图组件渲染到指定插座ember.js

我的应用程序模板中有2个指定插座，slider-area和pre-footer。有没有办法将参数（如索引模板中显示的main-slider组件）中传递的视图组件传递给指定的出口？所以我需要通过{{main-slider sliders=filteredSlider}}到索引模板中的outlet {{outlet "slider-area"}}？将带有参数的视图组件渲染到指定插座ember.js

我来自铁轨，所以原谅我的想法，如果这不是多么烬。可以在应用程序模板中指定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('[email protected]') 
}); 

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

来源

2014-02-10 dodgerogers747

好了，我有办法解决这个问题，而不是试图在模板中通过视图组件到一个特定出口（轨道上的红宝石），关键是创建一个模板，而不是一个组件，并将其从Route中渲染到特定的出口。

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

所以下面的IndexRoute我们定义，我们发送到控制器，sliders的数据，我们也指定我们想用this.render();渲染默认出口正常的内容，然后我们使我们的共同滑块模板到指定出口“滑块区域”。然后在我们的控制器中，我们将模型数据过滤为我们的规格，并且我们将这个功能的BatterySliders命名为使用此功能的所有控制器。

app.js

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

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>

来源

2014-02-12 03:46:58 dodgerogers747

将带有参数的视图组件渲染到指定插座ember.js

回答

相关问题