CODEWITHSUNDEEP
javascripthtmlmeteorroutesiron-router
comixninja
comixninja

Reputation: 746

Supporting multiple parameters with nested properties in Meteor and Iron Router

Using Meteor and Iron Router, I've created dynamic page paths that use multiple parameters. However, if I attempt to access nested/child properties in my path, the route breaks. These posts were helpful but did not address child-properties:
Iron-router nested routes with multiple parameters
meteor iron-router nested routes

Iron Router

this.route('location',{
  path: '/properties/:foo/:_id',
  waitOn: function(){
    return Meteor.subscribe('properties', this.params._id);
  },
  action: function(){
    this.render('propertyPage', {
      data: function(){
        return Properties.findOne(this.params._id);
      }
    });
  }
});


Markup (Works)

<a href="{{pathFor 'location' foo=bar }}">Click Me</a>


When attempting to reference a nested property in the markup, it breaks:

Markup (NOT working)

<a href="{{pathFor 'location' foo=bar.nestedChild }}">Click Me</a>


I also tried it inside of the javascript, with no luck:

path: '/properties/:foo.nestedChild/:_id',


Is there a way to reference a nested property without breaking Iron Router?

- - - Edit - - -

For a more practical example:

// data context from route action (Properties.findOne(this.params._id))
property = {
  _id: "3cu7B8b6K3EzCgYnQ"
  address: {
    city: 'Houston',
    state: 'TX',
    zip: 77006,
    lat: null,
    lng: null
  },
  images: ['img1.png', 'img2.png', 'img3.png'],
  schools: [
    { grade:'elementary', name:'Haude', rating:4 },
    { grade:'middle', name:'Strauke', rating:5 },
    { grade:'high', name:'Klein', rating:3 },
  ]
}

I'm trying to build out a url schema like this:

path: '/properties/:address.city/:address.state/:address.zip/:_id'

or in the example's case:

"/properties/Houston/TX/77006/3cu7B8b6K3EzCgYnQ"

Upvotes: 1

Views: 454

Answers (2)

mhlavacka
mhlavacka

Reputation: 701

It's little too late, but somebody might benefit anyway. I solved it the following way:

Defining a nested path (BTW Defining paths this way is better for SEO)

 <a href="/user/{{owner.id}}/playlist/{{id}}"> Content </a>

Router

this.route('playlistItem', {
  path: '/user/:owner/playlist/:playlist',
  onBeforeAction: function() {
    // You can get your params 
    var ownerId = this.params.owner
    var playlistId = this.params.playlist
    // execute some code
  },
});

Upvotes: 0

Chip Castle
Chip Castle

Reputation: 2192

In your route, you need to fetch :foo from the params object if you want to use it:

var foo = this.params.foo;

Upvotes: 1

Related Questions