材料設計精簡版：動態抽屜佈局不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

回答

相關問題