Meteor Iron Router not working on certain links -


i have route this:

router.route('/box', function () {     this.render('boxcanvastpl'); },{     name: 'box',     layouttemplate: 'appwrapperloggedintpl',     waiton: function() {         console.log("box route ran ok.");         return [             meteor.subscribe('item_ownership_pub', function() {                 console.log("subscription 'item_ownership_pub' ready.");             }),             meteor.subscribe('my_items', function() {                 console.log("subscription 'my_items' ready.");             })         ];     } }); 

... , clicking link in template this:

<a href="/box?box=123" class="box-num-items">my link</a> 

i receive 'box route ran ok.' message, reason page not navigate given url. have added console.log code in funciton run when 'boxcanvastpl' rendered, these aren't showing in browser console. seems inbetween stopping templkate re-rendering, can't put finger on - ideas?

there properties of iron router need aware of.

say user on /boxes , there box template renders path. if you:

  • click on link <a href="/boxes?box=123">click me</a>

or

  • click on link <a href="{{pathfor 'box'}}">click me</a>

iron router not re-render template because exists on page. not re-render template if box template happens partial template rendered on page you're on , exists on page want navigate to.

since doesn't re-render, code have inside template.box.onrendered not run again.

this behavior common in layout, header, , footer templates. many users, these templates used of website's pages, regardless of path. because layout, header, , footer template rendered on person's first visit site, won't re-rendered ever again if user decides navigate other parts of site using same templates, code inside template.layout/header/footer.onrendered won't fire.

also note - if reactive spacebars helper changes physical of layout / header / footer, doesn't qualify actual render, reactive updates template not trigger onrendered callback.

the lack of re-rendering gives meteor "snappy" feel.

edit

try code in reactive, event-driven style. try not think in render / re-render sense.

  1. you go /box
  2. you click on link /box?box=2342
  3. get params or query in iron router

https://github.com/iron-meteor/iron-router/blob/devel/guide.md#route-parameters

  1. in iron router use data params or query set data context template.

  2. grab stuff data context needed inside of template's .onrendered, .events, , .helpers callbacks.

  3. set session vars necessary , use them in helpers give reactive changes page without having re-render template. use events trigger updates session vars to, again, trigger reactive changes page.

try this:

afterwards, go /test?bunnies=lalalala

check out console logs

test.html

<template name="test">      {{mydata}}  </template> 

test.js

template.test.helpers({    mydata: function() {     console.log("data context accessed test.helpers: ", this);     console.log("this.bunnies accessed test.helpers: ", this.bunnies);     return this.bunnies;   }  });  template.test.onrendered(function() {    console.log("data context accessed test.onrendered: ", this.data);  });  template.test.events({    'click': function(){     console.log("data accessed test.events: ", this);   }  }); 

router.js

router.route('/test', function() {   console.log("routed!");   this.render('test');  }, {   name: 'test',   data: function(){     //here setting data context     // /test?bunnies=1234     var query = this.params.query;     console.log("query: ", query);      return query;   },   waiton: function() {     console.log("waiton running (should see message once each subscription)");     return [       meteor.subscribe('item_ownership_pub'),       meteor.subscribe('my_items')     ];   } }); 

way cleaner way of writing router

router.route('/test', {   waiton: function() {     console.log("waiton running (should see message once each subscription");     return [       meteor.subscribe('item_ownership_pub'),       meteor.subscribe('my_items')     ];   },   data: function(){     var query = this.params.query;     console.log("query: ", query);     return query;   },   action: function(){     console.log("this re-render if url params changed");     this.render();   } }) 

Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -