CODEWITHSUNDEEP
ember.jshandlebars.js
EsTeGe
EsTeGe

Reputation: 3065

Ember.js - How can I hide a partial depending on the current route?

I want to be able to only display a sidebar on some of my routes. How can I achieve something like this:

<div class="container">
    <div id="ember-app">
        <script type="text/x-handlebars">
            // if currentRoute == /something, then show this:
            <div class="row">
                {{partial sidebar}}
                <div class="span9 offset3 user-feed">
                    {{outlet}}    
                </div>
            </div>
            // else, show this:
            {{outlet}}
            // endif
        </script>
    </div>
</div>

<script type="text/x-handlebars" data-template-name="_sidebar">
    // Sidebar code here ...
</script>

So when I visit /#/something I should see the sidebar, but on all other routes, I shouldn't.

Upvotes: 2

Views: 1541

Answers (2)

maikel
maikel

Reputation: 1165

A simple fix may be to use the partials argument with quotes? 

{{partial 'sidebar'}}

Upvotes: 1

selvagsz
selvagsz

Reputation: 3872

You can observe the currentPath property to match the current route with Regex. 

App.ApplicationController = Ember.Controller.extend({
 showSidebar: function(){
  var routes_array = ['two','four'],
    currentPath = this.get('currentPath'),
    filteredArray, showSideBar = false;

  routes_array.forEach(function(itm){
   var tab = new RegExp('^'+itm+'*');
   if(!Em.isEmpty(currentPath.match(tab)))
    showSideBar = true;
   });
  return showSideBar;
 }.property('currentPath')
});

Just a simple try Here

Upvotes: 3

Related Questions