0

我正在使用Riot.js，并且我有一个根元素，我在其中为登录框和实际应用程序呈现不同的布局。MDL 版本是 1.0.6。

我不允许发布图片，但可以在此处找到屏幕截图。在 codepen 中设置它有点复杂，所以我不会这样做。

如果我跳过登录并调用upgradeAllRegistered()或upgradeDom()在应用程序添加到 dom 之后，一切都会按预期工作。

但是，如果我首先呈现登录屏幕，将其替换为应用程序并upgradeDom()再次调用，则布局不再起作用。标题不在顶部。

我已经检查了 dom usingdiff并且在这两种情况下都是相同的。它是这样开始的：

<div id="app" riot-tag="app">
  <div class="mdl-layout__container">
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header has-drawer is-upgraded" data-upgraded=",MaterialLayout">
      <header class="mdl-layout__header mdl-color--primary mdl-color-text--primary-contrast is-casting-shadow">
        <div class="mdl-layout__drawer-button"><i class="material-icons">menu</i></div>
          <div class="mdl-layout__header-row">
            <span class="mdl-layout-title">Home</span>
              ...

我不相信这仅发生在 riot 中，但也发生在其他框架中。我想问题在于MaterialLayout如果多次初始化，它就无法正常工作。布局基于仪表板示例。

有什么建议如何重置布局？如果不可能，我总是可以在登录后进行完全刷新。

4

1 回答 1

0

我在使用 Riot.js 时遇到了同样的情况，解决方案是重新初始化 MDL 的 MaterialLayout 组件。它的完成如下：

<div id="app" class="mdl-layout mdl-js-layout">
</div>

var element = document.querySelector('#app:not(.is-upgraded)')
element.MaterialLayout.init();

注意：在已经升级的元素上重新初始化 MaterialLayout 是一个问题，因此添加了检查以查看元素是否已经升级。

于 2016-06-06T13:28:17.603 回答