材料设计精简版：动态抽屉布局不upgradeElement

显示application.hbs材料设计精简版：动态抽屉布局不upgradeElement

<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}}将为true，并且应该显示导航抽屉。我检查了DOM。它有抽屉。但抽屉按钮没有显示。当我刷新页面时，它出现了。所以我明白，材料仅在上传时间内对这些组件起作用。但我明白，componentHandler.upgradeElement()是有用的情况下动态compoenents。我试过navigation-drawer.js。但它没有奏效。我哪里错了？

来源

2017-07-26 Lokesh Cherukuri

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

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

来源

2017-09-23 17:42:21 Santosh

材料设计精简版：动态抽屉布局不upgradeElement

回答

相关问题