1

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>

しかし、それはto を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を介して動的に渡す必要があるだけです

4

1 に答える 1

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

于 2015-12-19T14:32:18.723 に答える