CODEWITHSUNDEEP
ember.jsember-cli
jmishra
jmishra

Reputation: 2081

Ember nesting of components not working

I have an ember-cli project and my application.hbs setup looks like this.

 {{#site-navigation}}
    <h1>Welcome to turbo entertainment</h1>
 {{/site-navigation}}

site-navigation is a component which looks like this

{{#nav-bar}}{{/nav-bar}}
  {{yield}}
{{#nav-footer}}{{/nav-footer}}

The problem is that <h1>Welcome to turbo entertainment</h1> get rendered perfectly fine but my nav-bar and nav-footer don't show up at all. Here's the rendered html

<div id="ember287" class="ember-view">
  <div id="ember316" class="ember-view site-navigation-view">
    <h1>this is helix entertainment</h1>
 </div> 
</div>

I have added classNames:[whateverThisComponentIs-view] to every of my component so I can identify the rendering. But as visible, I don't see a container named nav-bar-view or nav-footer-view.

I am on ember-cli --version 0.1.4

Upvotes: 0

Views: 138

Answers (2)

jmishra
jmishra

Reputation: 2081

The issue was some of the node modules were not properly installed. I basically removed the app and restarted the whole project, making sure I did npm update on the whole thing. That worked it out.

Upvotes: 0

benzo
benzo

Reputation: 160

You say you're yielding

<h1>Welcome to turbo entertainment</h1>

to the site-navigation component but when it gets rendered you're seeing

<h1>this is helix entertainment</h1>

Was this a mistake in composing the question? If not, are you sure you're debugging the correct app or correct version of the app? If you're using liveReload with ember cli make sure you restart ember serve to ensure that everything is compiled properly and all your templates are up to date.

Upvotes: 1

Related Questions