Question

我在app.html和app.js中有一个带导航的Aurelia项目。该项目包含一个主页，该主页具有不同的样式，包括与非主页视图不同的导航。

我想关闭主视图的导航，所以我尝试设置一个变量（showMenu）来切换可见性。事实上，我可以使用jQuery来做到这一点，但我想知道是否有Aurelia这样做的方式。如果我将this.showMenu设置为true，则显示菜单容器，并将其隐藏。像这样举例如：

app.html

OK

app.js

  <div class="container" if.bind="showMenu">

我想做的是从home.js将showMenu设置为false。我试过这个（在20个左右的其他尝试中），但它不起作用。

home.js

  constructor(router){
  this.router = router;
  this.showMenu = true;  
  ...other things
  }

是否有办法通过$ parent或其他方式使用视图模型隐藏app.html中的菜单？

修改

这有效，但感觉有点像黑客。

home.js

  activate() {
    this.showMenu = false;
  }

Answer 1

您应该能够使用路由器来实现这一目标。由于这仅适用于一个页面，因此假设您的路径名称为configureRouter（或者您可以使用<div class="container" if.bind="router.currentInstruction.config.name !== 'home'">中设置的RouteConfig的其他属性），则可以使用此类内容：

    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">-->
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>Google Maps Multiple Markers</title>
    <script src="https://maps.google.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" type="text/javascript"></script>

</head>
<body>
    <div class="app">
        <div id="map" style="height: 400px; width: 500px;">
        </div>

        <script type="text/javascript">
            var locations = [
                ['Bondi Beach', -33.890542, 151.274856, 4],
                ['Coogee Beach', -33.923036, 151.259052, 5],
                ['Cronulla Beach', -34.028249, 151.157507, 3],
                ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
                ['Maroubra Beach', -33.950198, 151.259302, 1]
            ];

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: new google.maps.LatLng(-33.92, 151.25),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var infowindow = new google.maps.InfoWindow();

            var marker, i;

            for (i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
        </script>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

Answer 2

我通过使用单独的shell来解决这个问题。默认情况下，Aurelia将使用app.js（或ts）启动您的应用。但您可以更改该默认值，并在验证后使用相同的命令重定向到新的shell。

在你的main.ts（或.js）中，你将有一条线来启动你的aurelia应用程序：

aurelia.start().then(() => aurelia.setRoot());

这一行告诉aurelia启动并设置应用的根视图模型，当aurelia.setRoot()没有值时，默认为app.ts（或.js）。

所以我为我的应用程序创建了一个登陆，我可以在其中显示与主应用程序完全分开的页面和样式，包括有限的路由器和导航。

export function configure(aurelia: Aurelia) {
    aurelia.use
      .standardConfiguration()

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  if (environment.testing) {
    aurelia.use.plugin('aurelia-testing');
  }

   aurelia.start().then(() => aurelia.setRoot('authPage'));
}

authPage.ts是我通常使用路由器配置的app.ts，但它只能在其中配置authPage，也许还有一两个其他欢迎页面。

authPage负责身份验证并获取适当的令牌。我使用第三方进行身份验证服务，因此我在此页面上所拥有的只是一个链接。确认成功验证后，无论哪种方式，您现在只想重定向到另一个aurelia shell。

@autoinject
export class AuthPage {
private app : Aurelia;
private router : Router;

constructor(router : Router, app: Aurelia) {
   this.app = app;
   this.router = router;
}

authenticate {
  //some kind of authentication procedure...

  if(authenticationSuccess) {
     this.router.navigate('/', { replace: true, trigger: false});
     this.router.reset();
     this.router.("authenticatedApp");
  }
}

提供行this.router.navigate('/', { replace: true, trigger: false});和this.router.reset();来处理issues mentioned here和SO here。如果没有其他两个，shell开关线this.router.("authenticatedApp");对我不起作用。

我的authenticatedApp为用户配置一个完整的路由器和导航菜单，就像你通常使用app.ts一样，但现在分成了自己的shell。

当然没有什么可以阻止某人直接链接到authenticatedApp，但此时没有显示没有api调用的数据，这些数据都需要显示访问令牌。

This is a useful link on building an Aurelia app with multiple shells for authentication

最终结果是一个单独的着陆页和应用程序页面，它们可以有不同的样式和不同的导航。在注销时你可以反过来重新加载auth页面。

Aurelia：从视图中更改app.js中的导航

2 个答案: