服务器端渲染+路由Riot.js？

Question

我正在使用 Node + Riot.js + Grapnel 路由库（它可以在客户端和服务器上工作）。我设法在客户端上设置路由，但我不知道如何让它在服务器上运行。

我的客户端路由器的当前功能很简单。我只是将 opts.route 发送到正确的组件，然后它将请求的页面（也是一个组件）安装到 div.

<x-layout>
  <div id="app-body"></div>

  <script>
    this.on('mount update', function() {
      riot.mount('#app-body', 'x-page-' + opts.route);
    });
  </script>
</x-layout>

但是对于 riot.render(tag, {page: 'dashboard'}) 它不会将 <x-page-dashboard> 安装到 #app-body。

当我删除 this.on('mount update' ... 包装器时，它给我一个错误

.../node_modules/riot/riot.js:1918
TypeError: (ctx || document).querySelectorAll is not a function`

这很明显，因为 Node 无法执行 DOM 操作。

我也试过动态加载组件，像这样

// Riot doesn't compiles such expressions `<x-page-{opts.route}>`
var tag = riot.tag2('x-layout', '<div id="app-body"><x-page-{opts.route}></x-page-{opts.route}></div>');
riot.render(tag, {route: 'dashboard'}); // --> <x-layout><div id="app-body"><x-page-{opts.route}></x-page-{opts.route}></div></x-layout>

// Compiles but not mounts (empty tag)
var tag = riot.tag2('x-layout', '<div id="app-body" riot-tag="x-page-{opts.route}"></div>');
riot.render(tag, {route: 'dashboard'}); // --> <x-layout><div id="app-body" riot-tag="x-page-dashboard"></div></x-layout>

// It's only working when I hard coded the tag name
var tag = riot.tag2('x-layout', '<x-page-dashboard></x-page-dashboard>');
riot.render(tag, {route: 'dashboard'}); // <x-layout><x-page-dashboard>___ CHILDREN COMPONENTS... ____</x-page-dashboard></x-layout>

有什么方法可以实现同构渲染+路由？我快到了，只需要通过 opts

以某种方式动态传递组件名称

Answer 1

我终于解决了。解决方案是使用 name="app_body" 属性，而不是像我尝试做的那样使用 id="app-body"。

<x-layout>
  <div name="app_body"></div>

  <script>
    this.mountPage = (page) => {
      riot.mount(this.app_body, 'x-page-' + page);
    }

    if (opts.route)
      this.mountPage(opts.route)
  </script>
</x-layout>

感谢 GianlucaGuarini 的回复https://github.com/riot/riot/issues/1450#issuecomment-165984208

工作示例https://github.com/GianlucaGuarini/riot-app-example

服务器端渲染+路由Riot.js？

Server side rendering + routing with Riot.js?

javascript

node.js

riot.js