CODEWITHSUNDEEP
javascripttemplatesember.jsroutesrender
Ian Steffy
Ian Steffy

Reputation: 1234

emberjs - Conditionally rendering templates within a larger template

Ember Community Assemble!

I want to conditionally {{render ''}} small templates inside of the application.hbs sidebar but the content of that sidebar depends on which model's hbs we are routed to. For instance, the contents of the 'permit' sidebar would be different than that of the 'profile' sidebar.

Right now I am only able to render all of the sidebar contents at once regardless of what model.hbs is chosen.

<!-- Right Sidebar in application.hbs START -->
    <div id="sidebar-wrapper" class="super-super-float-right-col">
      <div id="sidebar-wrapper" class="super-float-right-col">
        <div id="sidebar-wrapper" class="float-right-col">
          {{render 'applicant'}} <!-- only available to '/person/#' -->
          {{render 'location'}} <!--  only available to '/permit/#' -->
        </div>
      </div>
    </div>
<!-- Right Sidebar END -->

    <div class="The rest of the content">
      {{outlet}} <!--inserts the rest of the html into the main content container -->
    </div>

I don't want both 'applicant' and 'location' to be rendered at the same time as they are above, and I want to data inside of 'applicant' to change depending on the id # of 'person'. The same relationship applies to 'location' inside of 'permit.hbs'

VpcYeoman.PermitRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render({ render:'location'});
    }
});

Application_route.js is blank for now

Upvotes: 1

Views: 967

Answers (1)

Michael Johnston
Michael Johnston

Reputation: 5320

Although 1.2.0 introduced the ability to use properties for template name in {{view}} it does not work for {{render}} yet.

So your options are to use {{view}} if you can, or a series of {{#if}} in the template, or a component/view to wrap the choice of what to render (one way to do this would be to have a template for each render, and a choice view that binds templateName property to the parentController property that determines which should be displayed)

Here is a jsbin that I used to experiment.

Upvotes: 2

Related Questions