Question

http://jsfiddle.net/bugsinamber/xjvYk/6/

设置

我有一个带有故事列表的索引视图。这会被渲染到应用程序插座中。当我点击每个故事时，故事视图会呈现在同一个插座中（替换索引视图）。我正在使用嵌套路由。

问题

当我点击“所有故事”从故事视图返回索引视图时，它工作正常。但是如果点击浏览器后退按钮返回到索引视图，则路径会正确地更改为“/ stories”，但索引视图不会呈现。我必须再次点击后退按钮才能呈现索引视图。

模板

<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}    
</script>

<script type="text/x-handlebars" data-template-name="stories">
    <p>Stories Index Page</p>    
    {{#each story in controller}}
    {{#linkTo "story"}}
    {{story.title}}
    {{/linkTo}}
    {{/each}}   
</script>

<script type="text/x-handlebars" data-template-name="story">
   {{#linkTo "index"}}Back to all stories{{/linkTo}}

   {{title}}    
    <p>Story test page</p>
</script>

app.js

App = Ember.Application.create({});

App.Router.map(function() {
    this.resource("stories", function() {
        this.resource("story", {path: ':story_id'});
    }); 
});

App.StoriesRoute = Ember.Route.extend({
  model: function() {
    return App.Story.find();   
  }
});

App.StoryRoute = Ember.Route.extend({
  model: function(params) {
    return App.Story.find(params.story_id);
  },  
  renderTemplate: function() {
      this.render('story', {   // the template to render
          into: 'application' // the template to render into
      });   
  }
});

App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('stories');
  } 
});

到目前为止我所知道的

如果我不使用嵌套路由，这可以正常工作。显然，如果我没有嵌套我的视图，我不应该使用嵌套路由，但这限制了设计需求。从逻辑上讲，我应该允许在这种情况下使用嵌套路由。

我正在嵌套路线，因为我需要从故事控制器访问“故事”，如下所示。如果我没有嵌套路由，那么当我首先加载故事视图（尚未加载索引视图）时，“posts”不会返回任何内容。

App.StoryController = Ember.ObjectController.extend({
    needs: "stories", 
    previousPost: function() {
        return this.advancePost(1);
    },
    nextPost: function() {
        return this.advancePost(-1);
    },
    advancePost: function(delta) {
        var index, length, posts;
        posts = this.get('controllers.stories');
        length = posts.get('length');
        index = (posts.indexOf(this.get('content')) + delta + length) % length;
        if (index >= 0 && index < length) {
            return this.transitionToRoute('story', posts.objectAt(index));
        }

    }
});

提前致谢。

Answer 1

您的路线应根据您的用户界面进行嵌套。 stories和story模板未嵌套，因此只需执行：

App.Router.map(function() {
  this.resource("stories");
  this.resource("story", { path: ':story_id' }); 
});

如果您希望story网址包含stories，则可以执行以下操作：

  this.resource("story", { path: 'stories/:story_id' });

接下来，您要访问App.StoryController中的所有故事。这并不意味着它需要嵌套在stories资源中，或者您需要使用App.StoriesController。

您想要访问数据，因此请获取数据并在App.StoryController：

中进行设置

App.StoryRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    controller.setProperties({
      model: model,
      stories: App.Story.find()
    });
  },
  model: function(params) {
    return App.Story.find(params.story_id);
  }
});

并保持App.StoriesRoute路线与单独路线相同，与App.StoryRoute无关。

App.StoriesRoute = Ember.Route.extend({
  model: function() {
    return App.Story.find();   
  }
});

Ember.js：使用嵌套路由时，后退按钮不刷新索引视图

设置

问题

模板

app.js

到目前为止我所知道的

1 个答案: