材料设计Lite:动态抽屉布局未用upgradeElement显示

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>

navigation-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>

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

navigation-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>

navigation-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}将为真，导航-抽屉将出现.我登记了多姆。里面有抽屉。但抽屉按钮没有显示出来。当我刷新页面时，它就出现了。所以我明白了，材料只是在装车时间内才对这些部件起作用。不过，我知道componentHandler.upgradeElement()对于动态组件是有用的。我在navigation-drawer.js.上试过但没起作用。我哪里出错了？

Answer 1

就在upgradeElement之前，您可能希望降级布局下的节点或直接父节点，并对其进行升级。这样，所有节点都会得到正确的重置和加载。这对我有用。

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