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

我正在使用Node + Riot.js + Grapnel路由库(可以在客户端和服务器上工作)。 我pipe理如何在客户端上设置路由,但我无法确定如何使其在服务器上工作。

我的客户端路由器的当前function很简单。 我只是发送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操作。

我也尝试dynamic加载组件,像这样

 // 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> 

有没有任何可能的方法来实现同构渲染+路由? 我几乎在那里,只需要通过optsdynamic地传递组件名称

我终于解决了。 解决scheme是使用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