Ich weiß nicht, wie man eine Webanwendung organisiert, die komponentenbasiertes Webframework verwendet

Question

Ich versuche, komponentenbasierte Frameworks für Frontend-Apps zu lernen. Derzeit verwende ich RiotJS, aber es gilt für jedes Framework, das dieselben Konzepte verwendet (React, Angular 2.0 usw.).

In einem grundlegenden MVC-Frontend-Frameworks (z. B. AngularJS) waren die Controller und Router sehr miteinander verbunden. Aber mit einem komponentenbasierten Framework ist die Grenze zwischen Router und Controller viel breiter. Und das verwirrt mich am meisten.

Hier ist ein Beispiel für eine Anwendung, die ich zu bauen versuche:

Ich habe drei Haupt-UI-Elemente: Navigationsleiste Inhaltsbereich und Signin Formular. Also habe ich drei Komponenten erstellt: my-navbar, my-content, my-signin. Ich konnte mehrere Routen pro Komponente erstellen. Wenn beispielsweise eine Route geändert wird, aktualisiert die Navigationsleiste das aktive "Modul". Das war einfach, weil ich nur die Klasse eines Listenelements ändere.

Jetzt möchte ich andere Tags innerhalb <my-content></my-content> laden. In AngularJS habe ich die Ansicht immer komplett geändert (mit dem UI-Router). Wie kann ich das in einem komponentenbasierten Framework erreichen? Nehmen wir an, ich habe zwei weitere Komponenten namens my-content-users-list-view, meine-content-users-detail-view. Wie kann ich sie basierend auf der Route zur Komponente my-content hinzufügen? Füge ich es einfach wie document.innerHTML += '<my-content-users-list-view></my-content-users-list-view> hinzu?

Ich weiß, die meisten meiner Syntax ist RiotJS, aber ich werde es verstehen, wenn Sie es in einer anderen Framework-Syntax schreiben.

Vielen Dank!

Answer 1

Im Grunde ja, Sie könnten nur Ihr Tag als DOM-Knoten anhängen und dann rufen Riot es zu montieren:

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