Help with using ember-bootstrap and breaking up template code into multiple components

@johnnyicon wrote:

Hi all,

I’ve decided to start using ember-bootstrap and have begun migrating code to take advantage of its features. I’m currently to replace my navigation with the navbar component (https://www.ember-bootstrap.com/#/components/navbars).

As a simple example of what I’m trying to do, my current nav is split up into two components (there are actually more). One nav is loaded when the user is NOT authenticated, and the other is loaded when the user is authenticated. The reason for this is to keep the nav template small.

Trying to implement this same structure with the ember-bootstrap navbars component doesn’t seem to work.

In my parent template, I have

{{#bs-navbar type=type backgroundColor=bg collapsed=collapsed onCollapse=(action (mut collapsed) true) onExpand=(action (mut collapsed) false) as |navbar|}}

  {{#if session.authenticated }}
    {{nav/auth-nav}}
  {{else}}
    {{nav/unauth-nav}}
  {{/if}}
  
{{/bs-navbar}}

In each of the components, I have code like this:

{{#navbar.content}}
  {{#navbar.nav as |nav|}}
    {{#nav.item}}{{#nav.link-to "index"}}Home{{/nav.link-to}}{{/nav.item}}
    {{#nav.item}}{{#nav.link-to "demo.navbars"}}Navbars{{/nav.link-to}}{{/nav.item}}
  {{/navbar.nav}}
{{/navbar.content}}

It’s very simple (or so I thought). Neither of the components load properly. Looking at it through Ember Inspector, the component is registered in the list views, but the HTML is blank.

If I copy the template code directly into the parent, then it loads fine. I was wondering if what I’m trying to do is possible or am I just going to suck it up and manage a big nav template?

Thanks in advance!

Posts: 1

Participants: 1

Read full topic