服務器端渲染+使用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" 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