コンポーネントベースのWebフレームワークを使用するWebアプリケーションの構成方法がわかりません

Question

フロントエンドアプリケーション用のコンポーネントベースのフレームワークを学ぼうとしています。現在、私はRiotJSを使用していますが、同じ概念（React、Angular 2.0など）を使用するすべてのフレームワークに適用されます。

MVCのフロントエンドフレームワーク（AngularJSなど）では、コントローラとルータが非常に接続していました。しかし、コンポーネントベースのフレームワークでは、ルータとコントローラの間の線がはるかに広いです。そして、これは私を最も混乱させるものです。

は、ここで私が構築しようとしていますアプリの一例です：

私は三つの主要なUI要素があります：ナビゲーションバー、コンテンツ領域、およびサインインもフォームを。そこで、私は3つのコンポーネントを作成しました：my-navbar、my-content、my-signin。コンポーネントごとに複数のルートを作成することができました。たとえば、ルートが変更されている場合、navbarはアクティブな「モジュール」を更新します。私がやっているのはリスト項目のクラスを変えることなので、これを簡単にすることができました。

他のタグを<my-content></my-content>にロードします。 AngularJSでは、常にビューを完全に（ui-routerを使用して）変更していました。どのようにコンポーネントベースのフレームワークでそれを達成することができます。 my-content-users-list-view、my-content-users-detail-viewという2つのコンポーネントがさらにあるとします。ルートに基づいてコンポーネントmy-contentにそれらを追加するにはどうすればよいですか？ちょうどdocument.innerHTML += '<my-content-users-list-view></my-content-users-list-view>のように追加しますか？

私の構文のほとんどはRiotJSですが、別のフレームワークの構文で記述するとわかります。

ありがとうございました！基本的に

Answer 1

、はい、あなただけのDOMノードとして、あなたのタグを追加することができ、それをマウントする暴動を呼び出します。

riot.route('/awesome-route',() => { 
    const tag = 'your-awesome-tag'; 
    const options = { ... }; 
    const elem = document.createElement(tag); 
    // TODO empty your content container using pure DOM or jQuery to get rid of the previous route's view... 
    document.querySelector('#content').appendChild(elem); 
    riot.mount(elem, tag, options); 
});