mirror of
https://github.com/aspnet/JavaScriptServices.git
synced 2025-12-25 19:17:30 +00:00
Reorganize templates into dir structure matching 'dotnet new' templates
This commit is contained in:
Steve Sanderson
@@ -0,0 +1,21 @@
|
||||
import './css/site.css';
|
||||
import 'bootstrap';
|
||||
import * as ko from 'knockout';
|
||||
import { createBrowserHistory } from 'history';
|
||||
import './webpack-component-loader';
|
||||
import AppRootComponent from './components/app-root/app-root';
|
||||
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')!;
|
||||
const basename = baseUrl.substring(0, baseUrl.length - 1); // History component needs no trailing slash
|
||||
|
||||
// Load and register the <app-root> component
|
||||
ko.components.register('app-root', AppRootComponent);
|
||||
|
||||
// Tell Knockout to start up an instance of your application
|
||||
ko.applyBindings({ history: createBrowserHistory({ basename }), basename });
|
||||
|
||||
// Basic hot reloading support. Automatically reloads and restarts the Knockout app each time
|
||||
// you modify source files. This will not preserve any application state other than the URL.
|
||||
if (module.hot) {
|
||||
module.hot.accept();
|
||||
module.hot.dispose(() => ko.cleanNode(document.body));
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class='container-fluid'>
|
||||
<div class='row'>
|
||||
<div class='col-sm-3'>
|
||||
<nav-menu params='router: router'></nav-menu>
|
||||
</div>
|
||||
<div class='col-sm-9' data-bind='component: { name: route().page, params: route }'></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,44 @@
|
||||
import * as ko from 'knockout';
|
||||
import * as History from 'history';
|
||||
import { Route, Router } from '../../router';
|
||||
import navMenu from '../nav-menu/nav-menu';
|
||||
|
||||
// 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>;
|
||||
public router: Router;
|
||||
|
||||
constructor(params: { history: History.History, basename: string }) {
|
||||
// Activate the client-side router
|
||||
this.router = new Router(params.history, routes, params.basename);
|
||||
this.route = this.router.currentRoute;
|
||||
|
||||
// Load and register all the KO components needed to handle the routes
|
||||
// The optional 'bundle-loader?lazy!' prefix is a Webpack feature that causes the referenced modules
|
||||
// to be split into separate files that are then loaded on demand.
|
||||
// For docs, see https://github.com/webpack/bundle-loader
|
||||
ko.components.register('nav-menu', navMenu);
|
||||
ko.components.register('home-page', require('bundle-loader?lazy!../home-page/home-page'));
|
||||
ko.components.register('counter-example', require('bundle-loader?lazy!../counter-example/counter-example'));
|
||||
ko.components.register('fetch-data', require('bundle-loader?lazy!../fetch-data/fetch-data'));
|
||||
}
|
||||
|
||||
// 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') };
|
||||
@@ -0,0 +1,7 @@
|
||||
<h1>Counter</h1>
|
||||
|
||||
<p>This is a simple example of a Knockout component.</p>
|
||||
|
||||
<p>Current count: <strong data-bind='text: currentCount'></strong></p>
|
||||
|
||||
<button data-bind='click: incrementCounter'>Increment</button>
|
||||
@@ -0,0 +1,12 @@
|
||||
import * as ko from 'knockout';
|
||||
|
||||
class CounterExampleViewModel {
|
||||
public currentCount = ko.observable(0);
|
||||
|
||||
public incrementCounter() {
|
||||
let prevCount = this.currentCount();
|
||||
this.currentCount(prevCount + 1);
|
||||
}
|
||||
}
|
||||
|
||||
export default { viewModel: CounterExampleViewModel, template: require('./counter-example.html') };
|
||||
@@ -0,0 +1,24 @@
|
||||
<h1>Weather forecast</h1>
|
||||
|
||||
<p>This component demonstrates fetching data from the server.</p>
|
||||
|
||||
<p data-bind='ifnot: forecasts'><em>Loading...</em></p>
|
||||
|
||||
<table class='table' data-bind='if: forecasts'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Temp. (C)</th>
|
||||
<th>Temp. (F)</th>
|
||||
<th>Summary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-bind='foreach: forecasts'>
|
||||
<tr>
|
||||
<td data-bind='text: dateFormatted'></td>
|
||||
<td data-bind='text: temperatureC'></td>
|
||||
<td data-bind='text: temperatureF'></td>
|
||||
<td data-bind='text: summary'></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -0,0 +1,23 @@
|
||||
import * as ko from 'knockout';
|
||||
import 'isomorphic-fetch';
|
||||
|
||||
interface WeatherForecast {
|
||||
dateFormatted: string;
|
||||
temperatureC: number;
|
||||
temperatureF: number;
|
||||
summary: string;
|
||||
}
|
||||
|
||||
class FetchDataViewModel {
|
||||
public forecasts = ko.observableArray<WeatherForecast>();
|
||||
|
||||
constructor() {
|
||||
fetch('api/SampleData/WeatherForecasts')
|
||||
.then(response => response.json() as Promise<WeatherForecast[]>)
|
||||
.then(data => {
|
||||
this.forecasts(data);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default { viewModel: FetchDataViewModel, template: require('./fetch-data.html') };
|
||||
@@ -0,0 +1,16 @@
|
||||
<h1>Hello, world!</h1>
|
||||
<p>Welcome to your new single-page application, built with:</p>
|
||||
<ul>
|
||||
<li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li>
|
||||
<li><a href='http://knockoutjs.com/'>Knockout.js</a> and <a href='http://www.typescriptlang.org/'>TypeScript</a> for client-side code</li>
|
||||
<li><a href='https://webpack.github.io/'>Webpack</a> for building and bundling client-side resources</li>
|
||||
<li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
|
||||
</ul>
|
||||
<p>To help you get started, we've also set up:</p>
|
||||
<ul>
|
||||
<li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
|
||||
<li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.</li>
|
||||
<li><strong>Hot module replacement</strong>. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, your Knockout app will be rebuilt and a new instance injected is into the page.</li>
|
||||
<li><strong>Code splitting and lazy loading</strong>. KO components may optionally be bundled individually and loaded on demand. For example, the code and template for 'Counter' is not loaded until you navigate to it..</li>
|
||||
<li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>
|
||||
</ul>
|
||||
@@ -0,0 +1,6 @@
|
||||
import * as ko from 'knockout';
|
||||
|
||||
class HomePageViewModel {
|
||||
}
|
||||
|
||||
export default { viewModel: HomePageViewModel, template: require('./home-page.html') };
|
||||
@@ -0,0 +1,33 @@
|
||||
<div class='main-nav'>
|
||||
<div class='navbar navbar-inverse'>
|
||||
<div class='navbar-header'>
|
||||
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
|
||||
<span class='sr-only'>Toggle navigation</span>
|
||||
<span class='icon-bar'></span>
|
||||
<span class='icon-bar'></span>
|
||||
<span class='icon-bar'></span>
|
||||
</button>
|
||||
<a class='navbar-brand' href='/'>WebApplicationBasic</a>
|
||||
</div>
|
||||
<div class='clearfix'></div>
|
||||
<div class='navbar-collapse collapse'>
|
||||
<ul class='nav navbar-nav'>
|
||||
<li>
|
||||
<a data-bind='attr: { href: router.link("/") }, css: { active: route().page === "home-page" }'>
|
||||
<span class='glyphicon glyphicon-home'></span> Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-bind='attr: { href: router.link("/counter") }, css: { active: route().page === "counter-example" }'>
|
||||
<span class='glyphicon glyphicon-education'></span> Counter
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-bind='attr: { href: router.link("/fetch-data") }, css: { active: route().page === "fetch-data" }'>
|
||||
<span class='glyphicon glyphicon-th-list'></span> Fetch data
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,21 @@
|
||||
import * as ko from 'knockout';
|
||||
import { Route, Router } from '../../router';
|
||||
|
||||
interface NavMenuParams {
|
||||
router: Router;
|
||||
}
|
||||
|
||||
class NavMenuViewModel {
|
||||
public router: Router;
|
||||
public route: KnockoutObservable<Route>;
|
||||
|
||||
constructor(params: NavMenuParams) {
|
||||
// This viewmodel doesn't do anything except pass through the 'route' parameter to the view.
|
||||
// You could remove this viewmodel entirely, and define 'nav-menu' as a template-only component.
|
||||
// But in most apps, you'll want some viewmodel logic to determine what navigation options appear.
|
||||
this.router = params.router;
|
||||
this.route = this.router.currentRoute;
|
||||
}
|
||||
}
|
||||
|
||||
export default { viewModel: NavMenuViewModel, template: require('./nav-menu.html') };
|
||||
@@ -0,0 +1,66 @@
|
||||
.main-nav li .glyphicon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* Highlighting rules for nav menu items */
|
||||
.main-nav li a.active,
|
||||
.main-nav li a.active:hover,
|
||||
.main-nav li a.active:focus {
|
||||
background-color: #4189C7;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Keep the nav menu independent of scrolling and on top of other items */
|
||||
.main-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
/* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
|
||||
body {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
/* On small screens, convert the nav menu to a vertical sidebar */
|
||||
.main-nav {
|
||||
height: 100%;
|
||||
width: calc(25% - 20px);
|
||||
}
|
||||
.main-nav .navbar {
|
||||
border-radius: 0px;
|
||||
border-width: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
.main-nav .navbar-header {
|
||||
float: none;
|
||||
}
|
||||
.main-nav .navbar-collapse {
|
||||
border-top: 1px solid #444;
|
||||
padding: 0px;
|
||||
}
|
||||
.main-nav .navbar ul {
|
||||
float: none;
|
||||
}
|
||||
.main-nav .navbar li {
|
||||
float: none;
|
||||
font-size: 15px;
|
||||
margin: 6px;
|
||||
}
|
||||
.main-nav .navbar li a {
|
||||
padding: 10px 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.main-nav .navbar a {
|
||||
/* If a menu item's text is too long, truncate it */
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import * as ko from 'knockout';
|
||||
import * as $ from 'jquery';
|
||||
import * as History from 'history';
|
||||
import * as crossroads from 'crossroads';
|
||||
|
||||
// This module configures crossroads.js, a routing library. If you prefer, you
|
||||
// can use any other routing library (or none at all) as Knockout is designed to
|
||||
// compose cleanly with external libraries.
|
||||
//
|
||||
// You *don't* have to follow the pattern established here (each route entry
|
||||
// specifies a 'page', which is a Knockout component) - there's nothing built into
|
||||
// Knockout that requires or even knows about this technique. It's just one of
|
||||
// many possible ways of setting up client-side routes.
|
||||
export class Router {
|
||||
public currentRoute = ko.observable<Route>({});
|
||||
private disposeHistory: () => void;
|
||||
private clickEventListener: EventListener;
|
||||
|
||||
constructor(private history: History.History, routes: Route[], basename: string) {
|
||||
// Reset and configure Crossroads so it matches routes and updates this.currentRoute
|
||||
crossroads.removeAllRoutes();
|
||||
crossroads.resetState();
|
||||
(crossroads as any).normalizeFn = crossroads.NORM_AS_OBJECT;
|
||||
routes.forEach(route => {
|
||||
crossroads.addRoute(route.url, (requestParams: any) => {
|
||||
this.currentRoute(ko.utils.extend(requestParams, route.params));
|
||||
});
|
||||
});
|
||||
|
||||
// Make history.js watch for navigation and notify Crossroads
|
||||
this.disposeHistory = history.listen(location => crossroads.parse(location.pathname));
|
||||
this.clickEventListener = evt => {
|
||||
let target: any = evt.currentTarget;
|
||||
if (target && target.tagName === 'A') {
|
||||
let href = target.getAttribute('href');
|
||||
if (href && href.indexOf(basename + '/') === 0) {
|
||||
const hrefAfterBasename = href.substring(basename.length);
|
||||
history.push(hrefAfterBasename);
|
||||
evt.preventDefault();
|
||||
}
|
||||
}
|
||||
};
|
||||
$(document).on('click', 'a', this.clickEventListener);
|
||||
|
||||
// Initialize Crossroads with starting location
|
||||
crossroads.parse(history.location.pathname);
|
||||
}
|
||||
|
||||
public link(url: string): string {
|
||||
return this.history.createHref({ pathname: url });
|
||||
}
|
||||
|
||||
public dispose() {
|
||||
this.disposeHistory();
|
||||
$(document).off('click', 'a', this.clickEventListener);
|
||||
}
|
||||
}
|
||||
|
||||
export interface Route {
|
||||
url?: string;
|
||||
params?: any;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import * as ko from 'knockout';
|
||||
|
||||
// This Knockout component loader integrates with Webpack's lazy-loaded bundle feature.
|
||||
// Having this means you can optionally declare components as follows:
|
||||
// ko.components.register('my-component', require('bundle-loader?lazy!../some-path-to-a-js-or-ts-module'));
|
||||
// ... and then it will be loaded on demand instead of being loaded up front.
|
||||
ko.components.loaders.unshift({
|
||||
loadComponent: (name, componentConfig, callback) => {
|
||||
if (typeof componentConfig === 'function') {
|
||||
// It's a lazy-loaded Webpack bundle
|
||||
(componentConfig as any)((loadedModule: any) => {
|
||||
// Handle TypeScript-style default exports
|
||||
if (loadedModule.__esModule && loadedModule.default) {
|
||||
loadedModule = loadedModule.default;
|
||||
}
|
||||
|
||||
// Pass the loaded module to KO's default loader
|
||||
ko.components.defaultLoader.loadComponent!(name, loadedModule as KnockoutComponentTypes.ComponentConfig, callback);
|
||||
});
|
||||
} else {
|
||||
// It's something else - let another component loader handle it
|
||||
callback((null as any) as KnockoutComponentTypes.Definition); // workaround until https://github.com/DefinitelyTyped/DefinitelyTyped/pull/17999
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user