1
votes

I'm creating a very basic Ember application using ember-cli and Ember 2.0. I used ember-cli to generate a template called 'footer.hbs' and the same component named 'footer.js'. Should Ember be able to correctly pick up any expressions I use in the footer.hbs? For example, I'm using the following three files: footer.js, footer.hbs, and application.hbs which imports the partial 'footer'. Why does the {{firstName}} property not show at all?

footer.js - /app/controllers/footer.js import Ember from 'ember';

export default Ember.Controller.extend({
  firstName: "TEST" 
});

footer.hbs - /app/template/footer.hbs

<footer class='nav navbar-inverse navbar-fixed-bottom'>
  <div class='container'>
      <ul class="footer-social list-inline">
        <li></li>
        <li></li>
        <li>{{firstName}}</li>
      </ul>
  </div>
</footer>

application.hbs

{{partial 'navigation'}}
{{outlet}}
{{partial 'footer'}}
2
You should read about naming conventions in ember-cli.Patsy Issa

2 Answers

1
votes

It looks like your files weren't generated as a component. I believe what you want to run is:

ember g component footer

in which case you would just have to put the following in application.hbs:

{{navigation}}
{{outlet}}
{{footer}}

Edit: looks like you can't call a component 'footer', so would have to call it something like 'footer-nav'

0
votes

Yes, you can access your controllers properties in the same template. You have two problems:

{{partial 'footer'}}

Partial inserts a template, what you want to do is use render:

{{render 'footer'}}

Beyond that /app/template/footer.hbs should be /app/templates/footer.hbs

Example on accessing the controller property: http://emberjs.jsbin.com/vipiwe/2/edit?html,js,output