mercredi 19 juillet 2017

Ember.js - Passing Params/Model info through a redirect

I am a bit confused how Ember.js handles models and redirects.

Basically, I have a posts page, a post page, and a comments page. The comments page is embedded in the post page, so my route map looks like this:

  define(function(require) {
  require('./loadingRoute');
  require('./rootRoute');
  require('./rootLoginRoute');
  require('./userRoute');
  require('./postsRoute');
  require('./postRoute');
  require('./commentsRoute');

  return function() {
    this.resource('root', {path: '/'}, function() {
      this.route('login', {path: '/login'});
      this.resource('user', {path: '/me'}, function() {
        this.resource('posts', {path: '/posts'});
        this.resource('post', {path: '/:post_id'}, function() {
          this.resource('comments', {path: '/comments'});
        });
      });
    });
  };
});

When I click on a post in the posts page, it transitions to the post page:

Posts Route:

define(function(require) {
    var Ember = require('ember');
    var App = require('app');

    return App.registerRoute('posts', {
        view: require('../view/postsView'),
        controller: require('../controller/postsController'),
        route: Ember.Route.extend({
            actions: {
                showPost: function(post) {
                    this.transitionTo('post', post);
                }
            },
            model: function(params, transition) {
                return this.controllerFor('posts').findPosts();
            },
            renderTemplate: function() {
                this.render({ into: 'root', outlet: 'posts' });
            }
        })
    });
});

Post Route:

define(function(require) {
    var Ember = require('ember');
    var App = require('app');

    App.registerRoute('postIndex', {
        route: Ember.Route.extend({
            redirect: function() {
                this.transitionTo('comments');
            }
        })
    });

    return App.registerRoute('post', {
        view: require('../view/postView'),
        controller: require('../controller/postController'),
        route: Ember.Route.extend({
            model: function(params, transition) {
                return this.controllerFor('post').findPost(params.post_id);
            },
            renderTemplate: function() {
                this.render({ into: 'root', outlet: 'posts' });
            }
        })
    });
});

However, as you can see in the Post Route, it redirects to my comments route upon loading (I think).

I need access to the post.post_id once I get into the comments route, but I don't understand how to pass this through the redirect.

There are some examples of redirect() having parameters (model, transition), however model always comes up undefined to me.

Here is Comments Route for reference:

define(function(require) {
    var Ember = require('ember');
    var App = require('app');

    return App.registerRoute('comments', {
        view: require('../view/commentsView'),
        controller: require('../controller/commentsController'),
        route: Ember.Route.extend({
            actions: {
                showComment: function(comment) {
                    this.transitionTo('comment', comment);
                }
            },
            model: function(params, transition) {
                console.log(params);
                //return this.controllerFor('comments').findComments(params.post_id);
            },
            renderTemplate: function() {
                this.render({ into: 'post'});
            }
        })
    });
});

The above has my controller line of code commented because params was undefined, and so was giving me issues (which is what I'm trying to solve).




Aucun commentaire:

Enregistrer un commentaire