6

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

    }
});

前もって感謝します。

4

1 に答える 1

2

UI に従って、ルートをネストする必要があります。 storiesおよびstoryテンプレートはネストされていないため、次のようにします。

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

storyURL に を含めたい場合は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();   
  }
});
于 2013-05-01T10:12:36.137 に答える