Question

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

但是当我访问/index.html#/posts然后点击我的其中一个帖子时，它可以正常工作，我的网址更改为/index.html#/posts/10052308并且正常工作，但如果我直接在此刷新页面url it dosnt不再工作。

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

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>

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

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

有人可以帮助我吗？

Answer 1

您的post路由存在问题，它引用了看起来不存在的变量。

使用link-to时它的工作原理是提供了模型，因此它会跳过模型钩子，但是当你刷新页面时它不再具有那种奢侈，并且必须从模型钩子中获取模型。 / p>

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

你可能应该沿着这些方向做点什么

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);
  }
});

这两个模型挂钩都依赖于实际上具有属性id的对象以及使用:id作为动态段的路由器。

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

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

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

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

1 个答案: