1

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

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

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

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

现在，我想在<my-content></my-content>. 在 AngularJS 中，我总是完全改变视图（使用 ui-router）。如何在基于组件的框架中实现这一点。假设我还有 2 个名为 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，但如果你用另一个框架的语法编写它，我会理解它。

谢谢！

4

1 回答 1

0

本质上，是的，您可以将标签附加为 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);
});
于 2016-04-24T15:35:37.207 回答