Flow Router doesn't render on a route change

OK, I’m not sure you understood the problem. The template DOES rerender on every route change, it’s the onRender and afterFlush events that don’t always fire after the template rerenders, so I can’t effectively redraw my fancy checkbox.

As you suggested, I tried using this.render(), but it’s not working for me. Nothing at all happens when the route is changed. I set a breakpoint, and this.render() does run, but nothing happens, and no errors are thrown. Apparently it’s not a simple swap-out like below. Did I miss something?

Unchanged

const authenticatedRoutes = FlowRouter.group({
	name: 'authenticated'
})
...
const adminRoutes = authenticatedRoutes.group({
  prefix: '/admin', 
  triggersEnter: [() => {
  	if (!Meteor.loggingIn() && !Roles.userIsInRole(Meteor.user(), [ 'admin' ])) {
		FlowRouter.go('/unauthorized')
	}
  }]      
})
...

WAS (flow-router, worked):

adminRoutes.route( '/doc/:doc_id', {
    name: 'docs',
    action: () => {
        BlazeLayout.render( 'defaultLayout', { content: 'documents' } )
    }
})

IS (flow-router-extra, does not work):

adminRoutes.route( '/doc/:doc_id', {
    name: 'docs',
    action: function() {
        this.render( 'defaultLayout', 'documents')
    }
})

this.render isn’t equal to BlazeLayout, and has different API.

It isn’t clear what your’re trying to accomplish, and why template should be re-rendered, while it’s already rendered, and :doc_id isn’t passed into the template, so nothing is changed.

To work on Template level you can use:

this.autorun(function () {
    FlowRouter.watchPathChange();
    setTimeout(function() {
       $('input[name="activeCheck"]').iCheck('update');
    }, 2000)
});

Better to have .iCheck at onRendered and at change event of input[name="activeCheck"].

That’s what I’ve been saying. That’s the way I originally had it, but onRendered doesn’t fire every time, so .iCheck is unable to refresh.

The template works just fine except for the checkbox:

/doc/1 First load , displays document 1 contents just fine. onRendered fires, iCheck correctly displayed

navigate to:

/doc/2 Displays document 2 contents just fine using the same template as previous. onRendered fires, iCheck correctly displayed

navigate back to:

/doc/1 Displays document 1 contents just fine using the same template as previous. However, onRendered DOESN’T fire, so iCheck is NOT refreshed so the iCheck checkbox status is not correctly displayed.

The autorun and setTimeout is a kludge to work around the race condition created by using autorun instead of onRendered and afterFlush which SHOULD be firing after updating the DOM but don’t.

Also, the change event is not trigger by DOM manipulation, so that is not a viable solution either.