javascript - 移动通信大会 : how to rerender on URL change

Question

大家好，

故事时间 - 如果您不在乎，请跳过

我刚刚开始使用 Meteor + Polymer，使用 Synthesis作者:@aruntk，我对结果非常满意，也很感激他在这个项目上投入的时间。不过我遇到了一个问题。

我之前只更改了 Iron-pages 对象来更改 View 的内容。将其放入 FlowRouter 中，如 FlowRouter.route("/", action: {ironpages.select("home");});工作得很好。但是，我的网站变得越来越复杂，我现在想重新渲染整个部分。我被告知要被动地执行此操作，这是(据我所知)构建应用程序的首选方式。

tl;dr - 如果您不关心故事，请跳到此处

所以我所做的只是输入 mwcLayout.render("test-layout",{"main":"yas-manual-page"});在我的路由器操作中。但是，我必须重新加载才能使更改可见，这不是我想要的。

• 更改 URL 时调用路由器操作
• mwcLayout.render()如果我在网站的初始构建中重新加载页面一次，调用就可以工作
• 调用 mwcLayout.render()稍后再次不执行任何操作

我已经阅读过这个主题，人们说这是单页应用程序的问题，而不是 react 性地构建它等等，但我不知道这为什么不是 react 性的。它对 URL 更改使用react。

如果您有时间，请与我分享一些见解，我真的很困惑。 :微微一笑:

祝大家有美好的一天!

<小时/>

免责声明:这是来自 Meteor 论坛的转发，建议您改为来这里。

Answer 1

此行为作为 mwc 布局的一项功能添加，以防止每次路由更改期间进行多次重新渲染。这里的解决方法是创建另一个 mwc 布局或设置第三个参数 forceRender。来自 mwc:layout 文档

强制渲染

在 mwc:layout 中，我们不会重新渲染布局，除非新布局不等于当前布局或设置了 forceRender 参数。这是为了防止在更改路由时出现不必要的重新渲染(即使您更改了参数/查询参数，路由也会重新运行，FlowRouter 操作中编写的渲染函数也会重新运行)。当您必须在保持当前布局的同时更改渲染时，forceRender 会派上用场。

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

导入/startup/client/router.js

...
  action:function(params,queryParams){
    mwcLayout.render("demo-landing",{"main":"test-layout1","header":"test-header"});
  }
...

现在如果你尝试

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

从控制台它不会工作，因为布局没有改变并且forceRender没有设置。

这有效->

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