Question

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

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

以下是我正在尝试构建的应用的一个示例：

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

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

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

谢谢！

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

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

1 个答案: