github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-24 18:47:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate from hasher.js to history.js to support HTML5-style navigation. Also clean up the HMR support.

Browse Source
This commit is contained in:
SteveSandersonMS
2016-03-08 15:56:43 +00:00
parent bbdbb449d5
commit 515c659a47
14 changed files with 390 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
templates/KnockoutSpa/ClientApp/components/app-layout/app-layout.ts
View File

@@ -1,8 +0,0 @@
import * as ko from 'knockout';
import * as router from '../../router';
class AppLayoutViewModel {
public route = router.instance().currentRoute;
}
export default { viewModel: AppLayoutViewModel, template: require('./app-layout.html') };

0
templates/KnockoutSpa/ClientApp/components/app-layout/app-layout.html → templates/KnockoutSpa/ClientApp/components/app-root/app-root.html
View File

39
templates/KnockoutSpa/ClientApp/components/app-root/app-root.ts Normal file
View File

@@ -0,0 +1,39 @@
import * as ko from 'knockout';
import { Route, Router } from '../../router';
// Declare the client-side routing configuration
const routes: Route[] = [
{ url: '', params: { page: 'home-page' } },
{ url: 'counter', params: { page: 'counter-example' } },
{ url: 'fetch-data', params: { page: 'fetch-data' } }
];
class AppRootViewModel {
public route: KnockoutObservable<Route>;
private _router: Router;
constructor(params: { history: HistoryModule.History }) {
// Activate the client-side router
this._router = new Router(params.history, routes)
this.route = this._router.currentRoute;
// Load and register all the KO components needed to handle the routes
ko.components.register('nav-menu', require('../nav-menu/nav-menu').default);
ko.components.register('home-page', require('../home-page/home-page').default);
ko.components.register('counter-example', require('../counter-example/counter-example').default);
ko.components.register('fetch-data', require('../fetch-data/fetch-data').default);
}
// To support hot module replacement, this method unregisters the router and KO components.
// In production scenarios where hot module replacement is disabled, this would not be invoked.
public dispose() {
this._router.dispose();
// TODO: Need a better API for this
Object.getOwnPropertyNames((<any>ko).components._allRegisteredComponents).forEach(componentName => {
ko.components.unregister(componentName);
});
}
}
export default { viewModel: AppRootViewModel, template: require('./app-root.html') };

8
templates/KnockoutSpa/ClientApp/components/nav-menu/nav-menu.html
View File

@@ -7,23 +7,23 @@
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' href='#'>WebApplicationBasic</a>
<a class='navbar-brand' href='/'>WebApplicationBasic</a>
</div>
<div class='clearfix'></div>
<div class='navbar-collapse collapse'>
<ul class='nav navbar-nav'>
<li>
<a class='navbar-brand' href='#' data-bind='css: { active: route().page === "home-page" }'>
<a class='navbar-brand' href='/' data-bind='css: { active: route().page === "home-page" }'>
<span class='glyphicon glyphicon-home'></span> Home
</a>
</li>
<li>
<a class='navbar-brand' href='#counter' data-bind='css: { active: route().page === "counter-example" }'>
<a class='navbar-brand' href='/counter' data-bind='css: { active: route().page === "counter-example" }'>
<span class='glyphicon glyphicon-education'></span> Counter
</a>
</li>
<li>
<a class='navbar-brand' href='#fetch-data' data-bind='css: { active: route().page === "fetch-data" }'>
<a class='navbar-brand' href='/fetch-data' data-bind='css: { active: route().page === "fetch-data" }'>
<span class='glyphicon glyphicon-th-list'></span> Fetch data
</a>
</li>