如何在Aurelia中呈现不同的视图结构？ [英] How to render different view structures in Aurelia?

问题描述

我的app.html中有一个常见的html结构，以便申请所有页面：

I have a common html structure in my app.html in order to apply for all pages:

<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（）方法来控制我将呈现的视图如下：

However, in my case, i have a login page with a totally different structure compared to others. In my app.js, i tried to use getViewStrategy() method to control which views i will render as following:

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'未定义。因此，我的解决方案不能很好地工作。有没有人有其他解决方案？非常感谢！

in the code above, 'navigationInstruction' is undefined. Therefore, my solution cannot work well. Does anybody have another solution? Thanks so much!

推荐答案

很棒的问题。实际上，当你有两个相同的单页面应用程序的完整部分时，正确的做法是创建多个根视图模型或shell。

Great question. In fact, when you have two totally sections of the same single page application, the right thing to do is create multiple root view models, or shells.

首先，通过将 aurelia-app =main添加到您的body标签来设置您的应用以进行自定义初始化，并创建一个相应名为 main.js 的新初始化文件。它应该是这样的。

First, set your app up for custom initialization by adding aurelia-app="main" to your body tag, and creating a new initialization file correspondingly named main.js. It should look like this.

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'） line告诉Aurelia加载一个名为 login.js 的文件作为app root。此文件应与您当前的 app.js 类似。您可以在此文件中执行任何操作，也可以使用相应的视图，它将与您的主应用程序完全分开。

The app.setRoot('login') line tells Aurelia to load a file called login.js as the app root. This file should look similar to your current app.js. You can do anything you want in this file and it's corresponding view, and it will stay totally separate from your main app.

要导航回主应用程序，您可以我需要调用 app.setRoot（'app'），这意味着您需要将Aurelia对象注入Login视图模型。

To navigate back to your main app, you'll need to call app.setRoot('app'), which means you'll need to inject the Aurelia object into your Login view model.

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

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

有关详细信息，请参阅此处的完整文章： Aurelia登录最佳实践

For more information, see my full write-up here: Aurelia Login Best Practices

这篇关于如何在Aurelia中呈现不同的视图结构？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！