MWC: how to rerender on URL change

help
1

Heyo everyone,

story time

I’m just starting out with Meteor + Polymer using Synthesis by @aruntk and I’m very happy about the results and greatful for the time he’s invested in this project. There’s one issue I’m having though.

I’ve previously only changed a iron-pages object to change the content of my view. Putting that in a FlowRouter like FlowRouter.route("/", action: {ironpages.select("home");}); works just fine. However, my site is getting more complex and I want to rerender a whole section now. I’m being told to do it reactively which is (to my poor understanding) the preferred way of building Apps here.

tl;dr - skip to here if you don’t care about stories

So what I did is just putting mwcLayout.render("test-layout",{"main":"yas-manual-page"}); in my Router action. However, I have to reload to make the changes visible which is not what I want.

  • the router action is being called when changing the URL
  • the mwcLayout.render() call works if I reload the page once in the initial building of the site
  • calling mwcLayout.render() again at a later point does not do anything

I’ve read up on the topic and people say it’s a problem with single-page apps and not building it reactively and whatnot, but I have no idea how this is not reactive. It’s reacting to the URL change.

Please, if you have a minute, share some insight with me, I’m really stuck. :slight_smile:

Have a wonderful day y’all!

EDIT: reposted on SE.SO as suggested in the sticky.

2

Hi @yorrd .

First of all thanks for the kind words. Regarding your problem this behavior is added as a feature of mwc layout to prevent multiple re rendering during each route change. Workarounds here are to create another mwc layout or to set third argument “forceRender”. From the mwc:layout docs

forceRender

In mwc:layout we dont re render the layout unless the new layout is not equal to the current layout or forceRender argument is set. This is to prevent unwanted rerendering while changing routes(even if you change a param/queryparam the route gets rerun so does the render function written inside FlowRouter action). forceRender comes in handy when you have to change the rendering while keeping the current layout.

<!-- client/main.html -->
...
<mwc-layout id="demo-landing">
      <div region="header"></div>
      <div region="main"></div>
</mwc-layout>
...

// imports/startup/client/router.js
...
  action:function(params,queryParams){
    mwcLayout.render("demo-landing",{"main":"test-layout1","header":"test-header"});
  }
...

Now if you try

mwcLayout.render("demo-landing",{"main":"test-layout2","header":"test-header"})

from console it wont work since layout is not changed and forceRender is not set.

This works->

mwcLayout.render("demo-landing",{"main":"test-layout","header":"test-header"},true);

Hope that solves your problem. :slight_smile:

3

Or you can get rid of flow router + mwc layout and use polymer app route for routing . https://github.com/aruntk/kickstart-meteor-polymer-with-app-route . Using app route is more efficient(re-renderings can be reduced) and more convenient while using polymer as the view layer.

Polymer Routing https://www.polymer-project.org/1.0/blog/routing

1 Like
4

Thank you very much for the suggestion, I was under the impression that this isn’t possible for some reason.

I got an answer here which is more like a quick fix (just force re-rendering), but next week I’ll switch over to polymer routing.

Have a nice day =)

5

@yorrd dude tkay is my stack username. [quote=“yorrd, post:4, topic:27650”]
I was under the impression that this isn’t possible for some reason
[/quote]

Reason is to to prevent unwanted re rendering while changing routes.
For example in this app https://github.com/aruntk/kickstart-meteor-polymer if you click the next button flow router param changes. But we don’t want the whole layout to re render instead we change the card section using iron pages.

6

Lol didn’t realize.

So just to recap: The FlowRouter needs to tell the layout manager what to do when the page is being loaded. And because every other URL change event is handled just like a complete page load (concerning FlowRouter) it can’t just always rerender - therefore the feature that it only renders the first time.

And app-route is more of a passive approach just telling the URL where we are depending on what dom-module we’re loading, so the URL changes after the layout does - therefore the problem from above doesn’t even occur.

So far so good?

Thanks a lot for your time <3

7

So far so good. :slight_smile:

1 Like