CODEWITHSUNDEEP
ember.js
JBK
JBK

Reputation: 225

Why doesn't application.hbs render in emberjs

Using ember 1.0.0-pre3

I have a little app that has this code:

window.App = Ember.Application.create()

App.ApplicationController = Ember.Controller.extend({})

App.Router.reopen
  location: 'history'

App.Router.map ->
  @resource 'users', ->
    @route 'new'

App.IndexRoute = Ember.Route.extend
  renderTemplate: ->
    @render('index')

This is application.hbs in the templates directory:

<div class='navbar navbar-inverse navbar-fixed-top'>
  <div class='navbar-inner'>
    <div class='container'>
      <div class='nav-collapse collapse'>
        <ul class='nav'>
          <li>{{#linkTo 'index'}}Home{{/linkTo}}</li>
          <li>{{#linkTo 'users.index'}}Users{{/linkTo}}</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class='container' id='main'>
  <div class='content'>
    <div class='row'>
      <div class='span12'>
        <div class='page-header'></div>
        {{outlet}}
      </div>
    </div>
  </div>
</div>

The problem is that it doesn't render this template. It doesn't throw an error when loading the the app at the base url "http://127.0.0.1:3000/". It will throw an error if I try an undefined route, so I know that Ember is loaded.

Upvotes: 1

Views: 3198

Answers (1)

Mike Grassotti
Mike Grassotti

Reputation: 19050

There does not appear to be anything wrong with your ember code. I made a copy on jsbin and it works fine: http://jsbin.com/ipivoz/1/edit

Pretty sure that means your template is not being compiled. To be sure, try adding the following to your application ready hook:

window.App = Ember.Application.create({
  ready: function() {
    console.log("Ember.TEMPLATES: ", Ember.TEMPLATES);
  }
});

Ember expects compiled handlebars templates to be in this array. If you run the above jsbin with js console open you'll see there is one template 'application' in the array. My guess is that the array will be empty if you try the same in your environment.

There are many ways to get that done, which is right depends on your environment. Since you're running on port 3000 I'm gonna guess that's rails. In that case check out the ember-rails gem. By far the simplest short-term approach is to define templates using script tags within the HTML page, as I've done in the jsbin.

Upvotes: 2

Related Questions