Ember Rails back button doesn't render template even without nested routes

Question

I am trying to get a simple Ember-Rails app, and everything seems to render fine, but the back button completely removes all rendered elements. With no errors.

From what I understand so far, this happens because Ember expects the 'parent' template has already been rendered and doesn't re-render it. In my app, I am first rendering a list of 'posts', with links to each post. Each link should open the post in question, replacing the rendered 'posts' page. It does so just fine, then when I click the back button, it does something interesting: It renders the index page, then removes everything in the application template (including index and such) altogether.

Here are the relevant snippets of code:

First, the rails application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Slimgur</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= stylesheet_link_tag    'bootstrap', media: 'all', 'data-turbolinks-track' => true %>
  <%= stylesheet_link_tag    'bootstrap-theme', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
<%= yield %>

<div class='container'>
    <div id="ember-app">
    </div>
</div>

</body>
</html>

//This is the page that is rendered by rails.
<h1>Static#index</h1>
<p>Find me in app/views/static/index.html.erb</p>

/* Application.js file. After all require statements. */
App = Ember.Application.create({rootElement: '#ember-app'});

/* Router.js */
// --------------------------
App.Router.map(function() {
  this.resource('posts');
  this.resource('post', { path: 'posts/:id' });
})

/* Application.hbs. */
// --------------------------
<header>
    <article>
        <div class="logo">
            <h1>
                <a href="#">App</a>
            </h1>
        </div>
</article>
</header>

{{!-- This is intended to render all Ember Templates.  --}}
<section id="main">
    {{{outlet}}}
</section>

<footer>
    <p> Testing Footer one two three </p>
</footer>

/* posts.hbs */
// --------------------------
<article id="posts">
    <h1>Posts</h1>

        <ul>
            {{#each post in model}}
                <li>{{#link-to 'post' post}}{{post.title}}{{/link-to}}</li>
            {{/each}}
        </ul>
</article>

{{outlet}}

/* post.hbs*/
// --------------------------
<h2>{{title}}</h2>

/* Ember Routes: */
// --------------------------
App.PostsRoute = Ember.Route.extend({
    model: function(){
        return this.store.find('post');
    },
})

App.PostRoute = Ember.Route.extend({
    model: function(params){
        return this.store.find('post', params.id);
    },
})

I believe that .hbs files compile to handlebars templates.

Answer 1

Well, eventually, I ended up removing turbolinks. I am still a bit unsure about doing so, but it doesn't seem to hamper my application in any way yet.

To do so, you would have to remove the turbolinks gem, the 'require turbolinks' line in application.js and the turbolink tags in application.html.erb.

I'm crossing my fingers hoping that didn't mess anything up that I haven't seen.

Ember Rails back button doesn't render template even without nested routes

Question

1 answers

solution1
0 ACCPTED 2014-11-24 10:54:02

Ember Rails back button doesn't render template even without nested routes

Question

1 answers

solution1 0 ACCPTED 2014-11-24 10:54:02

solution1
0 ACCPTED 2014-11-24 10:54:02