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

【问题标题】：I don't know how to organize a web app that uses component based web framework我不知道如何组织使用基于组件的 Web 框架的 Web 应用程序
【发布时间】：2016-04-24 23:35:37
【问题描述】：

我正在尝试为前端应用学习基于组件的框架。目前，我正在使用 RiotJS，但它适用于任何使用相同概念的框架（React、Angular 2.0 等）。

在基本的 MVC 前端框架（例如 AngularJS）中，控制器和路由器之间的连接非常紧密。但是对于基于组件的框架，路由器和控制器之间的界限要宽得多。这是最让我困惑的地方。

这是我正在尝试构建的应用程序的一个示例：

我有三个主要的 UI 元素：导航栏、内容区域和登录表单。因此，我创建了三个组件：my-navbar、my-content、my-signin。我能够为每个组件创建多个路由。例如，如果路线发生变化，导航栏会更新活动的“模块”。这样做很容易，因为我所做的只是更改列表项的类别。

现在，我想在<my-content></my-content> 中加载其他标签。在 AngularJS 中，我总是完全改变视图（使用 ui-router）。如何在基于组件的框架中实现这一点。假设我还有两个名为 my-content-users-list-view、my-content-users-detail-view 的组件。如何根据路由将它们添加到组件my-content？我只是像document.innerHTML += '<my-content-users-list-view></my-content-users-list-view>一样添加它吗？

我知道我的大部分语法都是 RiotJS，但如果你用另一个框架的语法编写它，我会理解的。

谢谢！

【问题讨论】：

看看John Papa's recommandations structure AngularJS

标签： angularjs reactjs riot.js

【解决方案1】：

基本上，是的，您可以将标签附加为 DOM 节点，然后调用 Riot 来挂载它：

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

【讨论】：