github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-25 02:57:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initial KnockoutSpa template

Browse Source
This commit is contained in:
SteveSandersonMS
2016-03-08 12:16:22 +00:00
parent 7d7e974b5f
commit bbdbb449d5
45 changed files with 2609 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
templates/KnockoutSpa/ClientApp/components/nav-menu/nav-menu.html Normal file
View File

@@ -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 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" }'>
<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" }'>
<span class='glyphicon glyphicon-th-list'></span> Fetch data
</a>
</li>
</ul>
</div>
</div>
</div>

19
templates/KnockoutSpa/ClientApp/components/nav-menu/nav-menu.ts Normal file
View File

@@ -0,0 +1,19 @@
import * as ko from 'knockout';
import { Route } from '../../router';
interface NavMenuParams {
route: KnockoutObservable<Route>;
}
class NavMenuViewModel {
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.route = params.route;
}
}
export default { viewModel: NavMenuViewModel, template: require('./nav-menu.html') };