EMBER direct route URL access dont load data

问题

i've a problem when i access my url direct from browser, it dosnt load my singular post infos. example: /index.html#/posts/10052308

but it works when i access /index.html#/posts and then click in one of my posts, my url changes to /index.html#/posts/10052308 and works, but if i refresh the page directly on this url it dosnt work any more.

I'm loading data from a API (JSON).

In my JS:

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


App.Posts = Ember.Object.extend();

App.Posts.reopenClass({
  allPosts: [],
  all: function(page, sort, order){
    this.allPosts = [];
    $.ajax({
      url: 'http://intense-bastion-3210.herokuapp.com/run_sessions.json',
      dataType: 'json',
      data: "page=" + page + "&sort_by=" + sort + "&order=" + order,
      context: this,
      success: function(response){
        console.log(response);
        response.run_sessions.forEach(function(posts){
          this.allPosts.addObject(App.Posts.create(posts))
        }, this)
      }
    })
    postsList = this.allPosts;
    return this.allPosts;
  }
});

App.PostsRoute = Ember.Route.extend({
  model: function() {
  var sortColumn = Ember.computed.alias('parentController.sortedColumn');
    return App.Posts.all("1", "id", "desc");
  }
});

App.PostRoute = Ember.Route.extend({
  model: function(params) {
    return posts.findBy('id', params.id);
  }
});

IN MY html

  <script type="text/x-handlebars" id="posts">
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <table class='table'>
            <thead>
              <tr><th>Runs</th></tr>
            </thead>
            {{#each model}}
            <tr><td>
                {{#link-to 'post' this}}{{id}}{{/link-to}}
            </td></tr>
            {{/each}}
          </table>
        </div>
        <div class="span9">
          {{outlet}}
        </div>
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" id="post">

    <h3>ID: {{id}}</h3>
    <h3>Sport TYPE: {{sport_type_id}}</h3>
    <h3>Start Time: {{start_time}}</h3>
    <h3>End Time: {{end_time}}</h3>
    <h3>Duration: {{duration}}</h3>
    <h3>Distance: {{distance}}</h3>
    <h3>Encoded Trace: {{encoded_trace}}</h3>

    <hr>
  </script>

This is when i open /index.html#/posts/ and click over any post http://i.stack.imgur.com/Hryge.png

This is when i refresh the page, or do direct acess http://i.stack.imgur.com/ht8Bc.png

Can anyone help me, please?

回答1:

Your post route has an issue, it's referencing what looks to be a non-existent variable.

The reason it works when you use the link-to is the model is provided, so it skips the model hook, but when you refresh the page it no longer has that luxury and must fetch the model from the model hook.

Personally I'm surprised it renders anything at all, I would guess it would blow up and say Reference error posts is not defined.

You probably should do something along these lines

App.PostRoute = Ember.Route.extend({
  model: function(params) {
    return App.Posts.allPosts.findBy('id', params.id);
  }
});

App.PostRoute = Ember.Route.extend({
  model: function(params) {
    return this.modelFor('posts').findBy('id', params.id);
  }
});

Both of those model hooks depend on the objects actually having the property id on them and your router using :id as the dynamic segment.

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

Here's a simple example that has all of the required elements

http://emberjs.jsbin.com/OxIDiVU/151/edit

来源：https://stackoverflow.com/questions/23324203/ember-direct-route-url-access-dont-load-data

标签

javascript

jquery

ember.js