CODEWITHSUNDEEP
ruby-on-railsember.js
Logan Serman
Logan Serman

Reputation: 29870

Displaying an Ember handlebars template within a Rails view

Here is a Rails view that I'm working with:

<%= current_user.name %>
<div class="row-fluid">
  <script type="text/x-handlebars" data-template-name="my-template">
    {{view App.ColumnView}}
  </script>
</div>

When the page renders, I expected the template rendered by App.ColumnView to display within the row-fluid div. Instead, it renders outside of my application layout's yield statement. Here is my application layout (omitted <html> block:

<body class="container">
  <header id="page-header">
    <h1>App</h1>
  </header>
  <div class="content">
    <%= yield %>
  </div>
</body>

My page ends up rendering like this:

<body class="container">
  <header id="page-header">
    <h1>App</h1>
  </header>
  <div class="content">
    <%= yield %>
  </div>
  <div id="ember259" class="ember-view">
     ...
  </div>
</body>

Seems like ember is appending the view to the <body> tag instead of rendering inside of my Rails view. Is there a way to render it inline with my Rails views?

Upvotes: 2

Views: 599

Answers (1)

edpaez
edpaez

Reputation: 1583

The rootElement property of the Ember application defaults to body, so Ember appends everything there.

You can of course, specify the element in which all of your application will be displayed

window.App = Ember.Application.create({
  rootElement: '#ember-app'
});

http://emberjs.com/api/classes/Ember.Application.html#property_rootElement

I'm glad this helped you!

Upvotes: 5

Related Questions