Template data reset

I am using flowrouter for my app and I have several products with the ability to set a quantity on the individual product page, I am updating the price with the total of the amount * the new quantity. I am trying to get it to reset the data back to original if the user navigates away from that product…so it only changes the id at the end of the url not the template so Im having a hard time figuring out how to get a function to run when the id changes. Thanks for any help.

Hi there,
I just stumbled upon a similar Issue with flowrouter caching the template when using different parameters while keeping the same base route. In my usecase I want to use the Url to clearly represent the ui state and I want to avoid using something like a session variable to reactivly change state.

Have you found a solution to force a hard reset?

There’s a trick you can do where you use an {{#each}} in the layout template to force something to re-render from scratch. Basically, let’s say you switch from a route representing item A to item B. If you do an {{#each}} over just the _id of the object, it will notice that the _id changed and completely destroy the old template and create the new one.

Let me know if that doesn’t make sense, I can post some code.

Thanks a lot for the tip😀 Can you post some example code? In my usecase i basically want to switch an autoform between insert & update mode and represent edit mode as a parameter.

So basically you could do:

Template.container.onCreated(function () {
  this.modeVar = new ReactiveVar("insert");
});

Template.container.helpers({
  modeArray() {
    return [ Template.instance().modeVar.get() ];
  }
});
<template name="container">
  {{#each mode in modeArray}}
    {{> form mode=mode}}
  {{/each}}
</template>

Now if you switch the reactive var, it should completely throw away the old form and render a new one from scratch.

1 Like

Alright I’ll give it a try :grinning:

Wouldn’t it be much better to have a “force rerender flag” in flowrouter? I don’t quite get why @arunoda did not accept the pr https://github.com/kadirahq/blaze-layout/issues/21. I mean: The above workaround does NOT make the code more readable. I’d love to know how @arunoda would implement the autoform usecase :smiley:

You could easily wrap that into some kind of forceRender template. I’d say the Flow Router philosophy is exactly that this stuff (rendering logic) doesn’t belong in the router.

Perhaps, it would be better as a PR to Blaze Layout.

why exactly you would ever need force reset of component?
I just dont get it, if u need to reset reactive variables, than you can wrap their initialisation in onCreated to a function and call it at start and whenever u find it usefull.

@thebarty I don’t like to have a force flag. I really need to discourage force flag. If we enabled it, that’s a best tool to misuse.

I always found there is a better way to fix this issue by how we handle this in the application level. If not, you are aware of that, you are doing something you are not suppose to do.

1 Like

Hi guys,

thanks a lot for your help and for your feedback!!!

I finally found a solution and get what @arunoda meant with “do it the reactive way”. :smile:

I registered an autorun to listen to FlowRouter.getParam()
and used it to reactively change the mode of the template.

It works like a charm now. So basically: get your setup-logic out of onCreated and onDestroyed
and trigger it reactively by the FlowRouter based autorun.

Thanks a lot for the hints guys! :smiley:

1 Like

@arunoda: Thanks for taking your time and staying on track - as written above I have found a way to implement it in the official FlowRouter way! And keep on doing your great work!! We all love it! :smiley: :blush: :clap: :clap:

2 Likes

Thanks :slight_smile:

NeedMOREwords

1 Like