Search code examples
javascriptmeteorpolymerweb-component

MWC: how to rerender on URL change

Heyo everyone,

story time - skip if you don't care

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!

disclaimer: it's a repost form the Meteor forums which suggests coming here instead.

Solution

  • 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. 

    ...
<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);