Question

application.hbs

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  {{navigation-bar class="mdl-layout__header"}}
  {{#if Auth.authenticated}} //Auth is a service
    {{navigation-drawer class="mdl-layout__drawer"}}
  {{/if}}
  <main class="mdl-layout__content">
    <div class="page-content">
      {{outlet}}
    </div>
  </main>
</div>

导航drawer.hbs

<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
  {{#if Auth.authenticated}}
    <span>Hi {{name}}</span>
    <button type="button" name="logout">Logout</button>
  {{else}}
    {{#link-to 'login'}}Login{{/link-to}}
  {{/if}}
</nav>

导航drawer.js

import Ember from 'ember';
/* globals componentHandler */

export default Ember.Component.extend({
  Auth: Ember.inject.service('Auth'),

  init() {
    this._super(...arguments);
    if(this.get('Auth').authenticated) {
      this.set('name', 'lokesh');
    }
  },

  didInsertElement () {
    this._super(...arguments);
    [].forEach.call(this.$(), function (el) {
        componentHandler.upgradeElement(el);
      });
  }
});

导航bar.hbs

<div class="mdl-layout__header-row">
  <span class="mdl-layout-title">Title</span>
  <div class="mdl-layout-spacer"></div>
  <nav class="mdl-navigation mdl-layout--large-screen-only">
    {{#if Auth.authenticated}}
      <button type="button" name="logout" {{action 'logout'}}>Logout</button>
    {{else}}
      {{#link-to 'login'}}Login{{/link-to}}
    {{/if}}
  </nav>
</div>

导航bar.js

import Ember from 'ember';

export default Ember.Component.extend({
  Auth: Ember.inject.service('Auth'),
  actions: {
    logout() {
      this.get('Auth').logout();
    }
  }
});

登录路线

import Ember from 'ember';

export default Ember.Route.extend({
  Auth: Ember.inject.service('Auth'),

  actions: {
    authenticate() {
      this.get('Auth').login();
      this.transitionTo('/');
    }
  }
});

<h3>Login Page</h3>
<button type="button" name="button"{{action 'authenticate'}} class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Login</button>

我想做什么？ 我有一个应用程序路由，它始终显示导航栏和导航抽屉，只有在用户登录时才会显示。所以我写了一个{{#if Auth.authenticated}}条件来隐藏导航 - 抽屉。一旦用户点击登录路线中的登录按钮，我就会更新所有文件中使用的AUTH服务。一旦用户点击登录，他将再次路由到应用程序路由。这次条件{{#if Auth.authenticated}}将为真，导航抽屉应该显示。我检查了DOM。它有抽屉。但抽屉按钮没有显示。当我刷新页面时，它出现了。所以我理解，材料只在上传时才对这些组件起作用。但是我理解componentHandler.upgradeElement()在动态组件中很有用。我在 navigation-drawer.js 中尝试过。但它没有用。哪里出错了？

Answer 1

在upgradeElement之前，您可能希望降级布局或直接父级下的节点，然后升级它们。这样，所有节点都可以重置并正确加载。这对我有用。

componentHandler.downgradeElements(document.querySelector(".mdl-layout"));
componentHandler.upgradeDom();

Material Design Lite：不使用upgradeElement显示动态抽屉布局

1 个答案: