paulvanbladel
commented
8 years ago Hi Ivan, Can you provide more precise steps for reproducing the problem. BTW, I like your blog. Very nice. Cheers
Open izderadicka opened 8 years ago
paulvanbladel
commented
8 years ago Hi Ivan, Can you provide more precise steps for reproducing the problem. BTW, I like your blog. Very nice. Cheers
izderadicka
commented
8 years ago Hi Paul,
this is the app.html:
<template>
<require from="components/nav-bar"></require>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="bootstrap-drawer/dist/css/bootstrap-drawer.css"></require>
<nav-bar router.bind="router" do-search.bind="doSearch"></nav-bar>
<div class="page-host has-drawer">
<div id="drawer-notifications" class="drawer drawer-right dw-xs-10 dw-sm-6 dw-md-4 fold" aria-labelledby="drawer-notifications">
<div class="drawer-controls notifications-btn">
<a href="#drawer-notifications" data-toggle="drawer" aria-foldedopen="false"
aria-controls="drawer-notifications"><i class="fa fa-comment" aria-hidden="true"></i></a>
</div>
<div class="drawer-contents">
<div class="drawer-heading">
<h2 class="drawer-title">Notifications</h2>
</div>
<ul class="drawer-nav">
<li repeat.for="n of notif.items" role="presentation">
<a data-toggle="drawer" data-target="#drawer-notifications" href="#">${n.text} ${n.args[0]}</a></li>
</ul>
</div>
</div>
<router-view></router-view>
</div>
</template>and app.js:
import { FetchConfig, AuthorizeStep} from 'aurelia-auth';
import {inject,LogManager,bindable} from 'aurelia-framework';
import { HttpClient} from 'aurelia-fetch-client';
import {Configure} from 'lib/config/index';
import {Notification} from 'lib/notification';
import {WSClient} from 'lib/ws-client';
import {Access} from 'lib/access';
const logger = LogManager.getLogger('app');
@inject(Configure, FetchConfig, HttpClient, WSClient, Notification, Access)
export class App {
constructor(config, fetchConfig, client, wsClient, notif, access) {
this.config = config;
this.notif=notif;
this.access=access;
fetchConfig.configure();
client.configure(conf => conf
.withBaseUrl(`http://${this.config.get('api.hostname',window.location.hostname)}:${this.config.get('api.port')}`)
.withInterceptor({
response: response => {
if (response && response.status == 401) {
logger.warn('Not authenticated!');
this.router.navigateToRoute('login');
throw new Error('Not autherticated!');
}
return response;
}
})
);
}
configureRouter(config, router) {
config.title = 'MyBookshelf2';
config.addPipelineStep('authorize', AuthorizeStep);
config.map([{
route: ['', 'welcome'],
name: 'welcome',
moduleId: 'pages/welcome',
nav: true,
title: 'Welcome'
}, {
route: 'ebooks',
name: 'ebooks',
moduleId: 'pages/ebooks',
nav: true,
title: 'Ebooks',
auth: true
}, {
route: 'login',
name: 'login',
moduleId: 'pages/login',
title: 'Login'
}, {
route: 'ebook/:id',
name: 'ebook',
moduleId: 'pages/ebook',
title: 'Ebook',
auth: true
}, {
route: 'search/:query',
name: 'search',
moduleId: 'pages/search',
title: 'Search Results',
auth: true
}, {
route: ['author/:id'],
name: 'author',
moduleId: 'pages/author',
title: 'Authors books',
auth: true
}
]);
this.router = router;
}
activate() {
this.access.signalState();
}
isAuthenticated() {
return this.access.authenticated;
}
doSearch(query) {
this.router.navigateToRoute('search', {
query: encodeURIComponent(query)
});
}
}they work - however if I just modify this line in html (root of drawer element):
<div class="page-host has-drawer">to this :
<div if.bind="1" class="page-host has-drawer">got error above - does not depend on where if.bind is bound - so using trivial case, which still leads to error. I'm not expert in aurelia - this looks like some race condition - that filter is called before routes are initalized?
Got this after I add another bindings to page that already worked ( if.bind). Not exactly sure where is problem