Как визуализировать различные структуры представлений в Aurelia?

Question

У меня есть общая структура HTML в моем app.html для того, чтобы подать заявление на все страницы:

<template> 
<require from="header"></require> 
<require from="side-bar"></require> 
<require from="theme-panel"></require> 
<require from="footer"></require> 
<!-- BEGIN HEADER --> 
<js-header></js-header> 
<!-- END HEADER --> 

<div class="clearfix"></div> 

<!-- BEGIN CONTAINER --> 
<div class="container"> 
    <div class="page-container"> 
     <!-- BEGIN SIDEBAR --> 
     <js-side-bar></js-side-bar> 
     <!-- END SIDEBAR --> 
     <div class="page-content-wrapper"> 
      <div class="page-content"> 
       <!-- BEGIN STYLE CUSTOMIZER(optional) --> 
       <js-theme-panel></js-theme-panel> 
       <!-- END STYLE CUSTOMIZER --> 
       <!-- BEGIN ACTUAL CONTENT --> 
       <div class="fade-in-up"> 
        <router-view></router-view> 
       </div> 
       <!-- END ACTUAL CONTENT --> 
      </div> 
     </div> 
    </div> 
    <!-- BEGIN FOOTER --> 
    <js-footer></js-footer> 
    <!-- END FOOTER --> 
</div> 
<!-- END CONTAINER --> 
</template> 

Однако, в моем случае, у меня есть страница входа с совершенно другой структурой по сравнению с другими. В моем app.js, я пытался использовать метод getViewStrategy(), чтобы контролировать, какие виды воздадут следующим образом:

activate(params, routeConfig, navigationInstruction){ 
    this.navigationInstruction = navigationInstruction; 
    //console.log("params", params); // undefined 
    //console.log("routeConfig", routeConfig); // undefined 
    //console.log("navigationInstruction", navigationInstruction); // undefined 
    //console.log("router", router); //undefined 
} 
getViewStrategy(){ 
    if(this.navigationInstruction == 'login'){ 
     return "app_login.html"; 
    } else { 
     return "app.html"; 
    } 
} 

в коде выше, «navigationInstruction» не определен. Поэтому мое решение не может работать хорошо. Есть ли у кого-нибудь другое решение? Спасибо!

Answer 1

Большой вопрос. Фактически, когда у вас есть два полностью раздела одного и того же одностраничного приложения, правильная вещь - создать несколько моделей корневого представления или оболочек.

Сначала установите приложение для пользовательской инициализации, добавив aurelia-app="main" в свой тег тела и создав новый файл инициализации, названный так main.js. Это должно выглядеть так.

export function configure(aurelia) { 
    aurelia.use 
    .standardConfiguration() 
    .developmentLogging(); 

    // notice that we are setting root to 'login' 
    aurelia.start().then(app => app.setRoot('login')); 
} 

app.setRoot('login') линия говорит Аурелия, чтобы загрузить файл с именем login.js в качестве корня приложения. Этот файл должен выглядеть так, как ваш текущий app.js. Вы можете делать все, что захотите, в этом файле, и это соответствующее представление, и оно останется полностью отделенным от вашего основного приложения.

Чтобы вернуться к основному приложению, вам необходимо позвонить app.setRoot('app'), что означает, что вам нужно ввести объект Aurelia в свою модель вид входа.

import { inject, Aurelia } from 'aurelia-framework'; 

@inject(Aurelia) 
export class Login { 
    constructor(aurelia) { 
    this.aurelia = aurelia; 
    } 
    goToApp() { 
    this.aurelia.setRoot('app'); 
    } 
} 

Для получения дополнительной информации см моей полной рецензии здесь: Aurelia Login Best Practices

Answer 2

Попробуйте добавить ссылку «если» в верхней части разделов, выберите стиль страницы, который вы хотите, на основе модели модели представления, заданной во время «canActivate()» или «activ()» процесса на каждой странице.

<template> 
    <template if.bind = "normalMain"> 
     .... 
    </template> 
    <template if.bind = "loginScreen"> 
     .... 
    </template> 
</template>