EMBER直接路由URL访问不加载数据

当我直接从浏览器访问我的网址时遇到问题，它不会加载我的单一帖子信息。 示例：/index.html#/posts/10052308

但当我访问 /index.html#/posts 然后单击我的一篇文章时，它会起作用，我的网址会更改为 /index.html#/posts/10052308 并且可以工作，但如果我直接在此网址上刷新页面，则不会不再工作了。

我正在从 API (JSON) 加载数据。

在我的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);
  }
});

在我的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>

这是我打开 /index.html#/posts/ 并单击任何帖子的时候https://i.stack.imgur.com/Hryge.png https://i.stack.imgur.com/Hryge.png

这是我刷新页面或直接访问的时候https://i.stack.imgur.com/ht8Bc.png https://i.stack.imgur.com/ht8Bc.png

有人可以帮我吗？

Your post路线有一个问题，它引用了一个看起来不存在的变量。

当您使用链接时它起作用的原因是提供了模型，因此它跳过模型挂钩，但是当您刷新页面时，它不再具有这种奢侈，并且必须从模型挂钩中获取模型。

就我个人而言，我很惊讶它会渲染任何东西，我猜它会爆炸并说Reference error posts is not defined.

你可能应该按照这些思路做一些事情

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

or

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

这两个模型挂钩都取决于实际具有该属性的对象id在它们和您的路由器上使用:id作为动态段。

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

这是一个包含所有必需元素的简单示例

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