emberjs not showing view

Question

I am just starting to learn ember.js and I am trying to integrate it into an existing rails application. I am using the ember-rails gem and everything looks OK except that my template is not showing up when I call {{outlet}} in rails view. Here is what my code looks like.

Rails view where I want my ember application to be

<script type="text/x-handlebars" data-template-name="application">
  <h1>test</h1>
  {{outlet}}
</script>
<div id="ember-root">

Here is my ember App code:

window.Resumecompanion = Ember.Application.create({
  LOG_TRANSITIONS: true, // basic logging of successful transitions
  LOG_TRANSITIONS_INTERNAL: true, // detailed logging of all routing steps
  rootElement: '#ember-root'
});


Resumecompanion.Router.reopen({});

Resumecompanion.JobsRoute = Ember.Route.extend({})

Resumecompanion.Router.map(function() {
  this.resource('jobs');
});

Lastly there is the handlebar template located in app/assets/javascripts/templates/jobs.handlebars

<h1>Jobs</h1>

<p>Your content here.</p>
{{outlet}}

When I run the application the template in jobs.hanldebars does not show up. In the console I see this:

Attempting URL transition to /jobs

Transition #0: application: calling beforeModel hook

Transition #0: application: calling deserialize hook

Transition #0: application: calling afterModel hook

Transition #0: jobs: calling beforeModel hook

Transition #0: jobs: calling deserialize hook

Transition #0: jobs: calling afterModel hook

Transition #0: Resolved all models on destination route; finalizing transition.

Transitioned into 'jobs'

Transition #0: TRANSITION COMPLETE.

Ember Debugger Active

So I think it is actually routing to 'jobs' but I am at a loss for why the template does not seem to be rendering and showing up. Any help is appreciated.

After some more playing I found if I declare this in my rails view

<script type="text/x-handlebars" data-template-name="jobs">
  <h1>Jobs</h1>
  {{outlet}}
</script>

Then it renders this template and shows up correctly. So maybe there is a naming problem that I am not aware of in the template?

Thanks,

Josh

Answer 1

When you define a route or resource in your router, it will also want to refer to your template. If you don't have a template by that name, there will be nothing to render. So your assumption was correct, that you need a "jobs" template to help correspond with your router code.

Here is a good post on the difference between routes and resources if you're interested.

http://blog.trackets.com/2013/02/01/ember-dot-js-router-and-template-naming-convention.html