我正在为我的项目使用Aurelia骨架.一切看起来都很直观,但是我遇到了一个我怀疑相当容易的问题(如果你知道的话).
问题是app.html/app.js最初显示导航栏并加载一些默认样式.
现在我需要一个登录页面,它不会加载任何东西,除了它自己的样式,没有导航栏没有任何东西 - 只是它自己的登录表单.
所以我尝试过这样的事情:
app.js
<template>
<div if.bind="auth.isNotAuthenticated()">
<require from="components/login/index" ></require>
<login router.bind="router"></login>
</div>
<div if.bind="auth.isAuthenticated()">
<require from="nav-bar.html" ></require>
<require from="../styles/styles.css"></require>
<div class="container" id="banner">
<div class="row">
<img src="images/logo.png" />
</div>
</div>
<nav-bar router.bind="router"></nav-bar>
<div class="page-host">
<router-view></router-view>
</div>
</div>
</template>
显然这不起作用(除非你刷新页面/ f5),因为app.js/app.html是始终存在且永不改变的根路由.但我希望标记中的逻辑有助于说明我想要解决的问题？
我猜我只知道当我从登录路线(登录成功)导航到另一条路线时,如何重新加载父路线(app.js).当我退出时,父路线(app.js)也应该再次刷新.然后我的所有问题都将得到解决.
我在这里错过了什么？:-)
我有一个Aurelia应用程序,用户可以选择他们当前正在"工作"的公司.应用程序中的每个页面都取决于当前选定的公司,用户可以从下拉菜单中选择新公司.下拉列表是导航栏上的一个组件.
我想要的是让该组件重新加载change.delegate处理程序上的当前页面而不重新启动应用程序.所以设置window.location.href是不可能的.
有没有办法迫使aurelia Router重新加载当前路线/页面？
另一种方法是使用EventAggregator信号在整个应用程序公司的变化,但这需要或者订阅该事件的每一页上或具有订阅了该事件的一个基类的每一页继承,但这些更多地参与选择.
在应用程序中,我希望导航到home/contract-view/10一个动作.试着
this.router.navigateToRoute(`home/contract-view`, { id: 10}, { absolute: true });
失败了 Route home/contract-view not be found
另一个尝试:
this.router.navigate(`#/home/contract-view`, { id: 10});
失败了Route not found: contract-view(…)
如何实现这一目标？App.ts:
configureRouter(config: RouterConfiguration, router: Router) {
config.title = 'Contracts Portal';
config.map([
{ route: ['', 'dummy'], name: 'dummy', moduleId: 'dummy', nav: false, title: 'Dummy', settings: { pos: 'left' } },
{ route: 'home', name: 'home', moduleId: 'home', nav: true, title: 'Home', settings:{pos: 'left', class: 'home' }, auth: true },
]);
this.router = router;
} …使用aurelia.io框架路由器时,读取和设置查询字符串的首选方法是什么？
例如,在网址中: http://www.myapp.com/#/myroute1/?s=mystate
我如何阅读和设置?s=mystate网址的一部分并让aurelia路由器正确导航并记住该状态,这样每当我到达我的route1viewmodel时,我都可以读取该状态变量并对其执行某些操作？
javascript query-string aurelia aurelia-navigation aurelia-router
我正在尝试开发一个网站,其中导航栏项目取决于登录用户的角色.
正如Patrick Walter在他的博客上建议的那样,我正在考虑创建一个session.js文件,在那里我将存储有关当前用户的信息:他们的用户名和角色.然后我会在nav-bar.js中注入此文件,并为路由创建一个过滤器,用户无权访问.一切正常,直到我点击刷新按钮...事实上,它创建了一个新的会话对象,我松开了前一个中的所有信息存储.
我在文档中看到了单例方法,但我不确定如何使用它.如果我将它插入我的代码中,如下所示,我收到消息:aurelia.use.singleton is not a function.
import config from './auth-config';
export function configure(aurelia) {
console.log('Hello from animation-main config');
aurelia.use
.singleton(Session)
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-animator-css')
.plugin('paulvanbladel/aurelia-auth', (baseConfig) => {
baseConfig.configure(config);
});
aurelia.start().then(a => a.setRoot());
}
export class Session {
username = '';
role = '';
reset() {
console.log('Resetting session');
this.username = '';
this.role = '';
};
}
我的最后一个想法是加密角色/用户名并使用浏览器的会话来存储信息.但我想向更有经验的开发人员询问他们对该主题的看法.
谢谢你的帮助!
编辑:这是我的session.js代码
export class Session {
username = '';
role = '';
reset() {
console.log('Resetting …我正在使用Aurelia框架.我想在每次用户导航到新路线/页面时在app文件(app.ts/app.js)中获取navigationInstruction信息.
我试图在应用程序的生命周期事件(激活和绑定)中获取此信息,但没有可用的信息.
任何人都可以帮我解决这个问题.
提前致谢.
我想传递用户,在发现AuthorizeStep要么对App class,然后到home module.
这就是我所拥有的:
export class App {
configureRouter(config, router) {
config.addPipelineStep('authorize', AuthorizeStep);
config.map([
{route: ['', ':filter'], name: "", moduleId: 'welcome'}
{route: 'home', name: "home", moduleId: 'home' auth:true}
]);
this.router = router;
}
}
class AuthorizeStep {
run(routingContext, next) {
if (routingContext.nextInstructions.some(i => i.config.auth)) {
this.client.get('auth/login')
.then(response => {
this.user = response.content;
});
}
return next();
}
}
javascript aurelia aurelia-navigation aurelia-router aurelia-binding
var gulp = require('gulp');
var sass = require('gulp-sass');
var runSequence = require('run-sequence');
var changed = require('gulp-changed');
var plumber = require('gulp-plumber');
var to5 = require('gulp-babel');
var sourcemaps = require('gulp-sourcemaps');
var paths = require('../paths');
var compilerOptions = require('../babel-options');
var assign = Object.assign || require('object.assign');
// transpiles changed es6 files to SystemJS format
// the plumber() call prevents 'pipe breaking' caused
// by errors from other gulp plugins
// https://www.npmjs.com/package/gulp-plumber
gulp.task('build-system', function () {
return gulp.src(paths.source)
.pipe(plumber())
.pipe(changed(paths.output, {extension: '.js'}))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(to5(assign({}, …我想我可能有配置问题.循环遍历一个对象数组时出错.这是错误.正在将对象数组加载到视图中,它们看起来是正确的.它只是爆炸的"repeat.for".
Unhandled promise rejection Error: Incorrect syntax for "for". The form is: "$local of $items" or "[$key, $value] of $items".
at SyntaxInterpreter.for (http://localhost:8080/jspm_packages/github/aurelia/templating-binding@0.13.0/index.js:142:13)
at SyntaxInterpreter.interpret (http://localhost:8080/jspm_packages/github/aurelia/templating-binding@0.13.0/index.js:27:34)
at TemplatingBindingLanguage.createAttributeInstruction (http://localhost:8080/jspm_packages/github/aurelia/templating-binding@0.13.0/index.js:267:46)
at ViewCompiler.compileElement (http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1442:41)
at ViewCompiler.compileNode (http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1331:23)
at ViewCompiler.compileElement (http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1536:31)
at ViewCompiler.compileNode (http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1331:23)
at ViewCompiler.compileElement (http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1536:31)
at ViewCompiler.compileNode (http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1331:23)
at ViewCompiler.compileElement (http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1536:31)
at ViewCompiler.compileNode (http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1331:23)
at ViewCompiler.compileNode (http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1353:33)
at ViewCompiler.compile (http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1314:12)
at http://localhost:8080/jspm_packages/github/aurelia/templating@0.13.2/index.js:1583:49
at run (http://localhost:8080/jspm_packages/npm/core-js@0.9.18/modules/es6.promise.js:91:43)
at http://localhost:8080/jspm_packages/npm/core-js@0.9.18/modules/es6.promise.js:105:11
at module.exports (http://localhost:8080/jspm_packages/npm/core-js@0.9.18/modules/$.invoke.js:6:25)
at queue.(anonymous function) (http://localhost:8080/jspm_packages/npm/core-js@0.9.18/modules/$.task.js:40:9)
at Number.run (http://localhost:8080/jspm_packages/npm/core-js@0.9.18/modules/$.task.js:27:7)
at listner (http://localhost:8080/jspm_packages/npm/core-js@0.9.18/modules/$.task.js:31:9)
视图 …
我现在正在使用aurelia JS.当aurelia开始路由时,我有一个问题,我想将标题页更改为我身体标签中的当前位置,我的意思是不是<title>标签,而是内部的身体
我在挖掘并搜索教程但是直到现在我没有得到正确的答案
我附上了我的代码
<template bindable="router">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header" mdl="layout">
<header class="mdl-layout__header mdl-color--primary">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">${title}</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<button class="android-more-button mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"
id="more-button">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect" for="more-button" mdl="menu">
<li class="mdl-menu__item">5.0 Lollipop</li>
<li class="mdl-menu__item">4.4 KitKat</li>
<li disabled class="mdl-menu__item">4.3 Jelly Bean</li>
<li class="mdl-menu__item">Android History</li>
</ul>
<!-- Navigation. We hide it in small screens. -->
</div>
</header>
我希望我的$ {title}显示当前活动页面.我有搜索但没有找到答案 …
我按照Aurelia教程中的示例设置了nav-bar.html和nav-bar.js.后来,我想在nav-bar.js VM中添加一些功能,但发现它的属性或方法都没有调用过.
我正在尝试在我的顶部导航中使用Aurelia Auth过滤,但即使省略了auth功能,也无法调用top-nav-bar.js中的任何内容.
代码如下:
顶级NAV-bar.js
import {bindable} from 'aurelia-framework';
import {inject} from 'aurelia-framework';
import {AuthService} from 'aurelia-auth';
//import {AuthFilterValueConverter} from './authFilter';
//import {Router} from 'aurelia-router';
@inject(AuthService )
export class TopNavBar {
_isAuthenticated=false;
@bindable router = null;
constructor(auth){
console.log('called nav bar constructor'); //NEVER CALLED
this.auth = auth;
}
//@computedFrom(this.auth)
get isAuthenticated(){
return this.auth.isAuthenticated(); //NEVER CALLED
}
}
顶级NAV-一个bar.html
<template>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- <require from="paulvanbladel/aurelia-auth"></require> -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span> …我希望为我的应用程序完成的每次提取显示一个加载器,防止用户多次提交相同的请求.为此,我更改了HttpClient配置,以便在main.ts中配置期间拦截请求和响应
let httpClient = new HttpClient();
httpClient.configure(config => {
config.withInterceptor({
request(request) {
// displayLoader();
return request;
},
response(response) {
// hideLoader();
return response;
},
});
});?
如果它是普通的js我会做类似document.body.appendChild ...但Aurelia不让我这样做.
有没有办法动态显示自定义视图,而无需更改路由或必须在每个执行请求的组件上插入新的加载视图？
此外,如果你有更好的方法解决这个问题,我愿意接受建议.
我有一个带有管理员"部分"的Aurelia应用程序设置.在本地启动网站并转到"localhost:9000"将带我到"src/blog/blog.html".这本质上是我的应用程序的入口页面,我有一个如此配置的Routeer:
Blog.ts:
import { AuthService, AuthenticateStep } from 'aurelia-authentication';
import { autoinject, computedFrom } from 'aurelia-framework';
import { Router, RouterConfiguration, NavigationInstruction } from 'aurelia-router';
@autoinject
export class Blog {
configureRouter(config: RouterConfiguration, router: Router) {
config.title = "My Site";
config.options.pushState = true;
config.options.root = '/';
config.addPipelineStep('authorize', AuthenticateStep);
config.map([
{ route: ['admin'], name: 'Admin', moduleId: '../admin/admin', auth: true },
{ route: ['login'], name: 'Login', moduleId: '../admin/login' },
{ route: ['', 'home'], name: 'Home', moduleId: './routes/index', nav: true }
]);
}
}
正如您所看到的,我在Blog.html中捕获localhost:9000 …