我不知道如何组织使用基于组件的Web框架的Web应用程序

Question

I am trying to learn component based frameworks for frontend apps. Currently, I am using RiotJS but it applies to any framework that uses the same concepts (React, Angular 2.0 etc).

In a basic MVC frontend frameworks (eg AngularJS), the controllers and router were very connected to each other. But with a component based framework, the line between router and controllers is much wider. And this is what confuses me the most.

Here is one example of an app that I am trying to build:

I have three main UI elements: Navigation Bar, Content Area, and Signin Form. So, I created three components: my-navbar, my-content, my-signin. I was able to create multiple routes per component. So for example, if there is a route changes, the navbar updates the active "module." Making this was easy because all I am doing is changing class of a list item.

Now, I want to load other tags inside <my-content></my-content> . In AngularJS, I was always changing the view completely (using ui-router). How can I achieve that in a component based framework. Let's say that I have 2 more components called my-content-users-list-view, my-content-users-detail-view. How can I add them to the component my-content based on the route? Do I just add it like document.innerHTML += '<my-content-users-list-view></my-content-users-list-view> ?

I know most of my syntax is RiotJS but I will understand it if you write it in another framework's syntax.

Thank you!

Answer 1

Essentially, yes, you could just append your tag as a DOM node and then call Riot to mount it:

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);
});