Skip to content

Commit bbdbb44

Browse files
SteveSandersonMSSteveSandersonMS
committed
Initial KnockoutSpa template
1 parent 7d7e974 commit bbdbb44

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+2609
-0
lines changed

‎templates/KnockoutSpa/.gitignore‎

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
/Properties/launchSettings.json
2+
3+
## Ignore Visual Studio temporary files, build results, and
4+
## files generated by popular Visual Studio add-ons.
5+
6+
# User-specific files
7+
*.suo
8+
*.user
9+
*.userosscache
10+
*.sln.docstates
11+
12+
# User-specific files (MonoDevelop/Xamarin Studio)
13+
*.userprefs
14+
15+
# Build results
16+
[Dd]ebug/
17+
[Dd]ebugPublic/
18+
[Rr]elease/
19+
[Rr]eleases/
20+
x64/
21+
x86/
22+
build/
23+
bld/
24+
[Bb]in/
25+
[Oo]bj/
26+
27+
# Visual Studio 2015 cache/options directory
28+
.vs/
29+
/wwwroot/dist/
30+
31+
# MSTest test Results
32+
[Tt]est[Rr]esult*/
33+
[Bb]uild[Ll]og.*
34+
35+
# NUNIT
36+
*.VisualState.xml
37+
TestResult.xml
38+
39+
# Build Results of an ATL Project
40+
[Dd]ebugPS/
41+
[Rr]eleasePS/
42+
dlldata.c
43+
44+
# DNX
45+
project.lock.json
46+
artifacts/
47+
48+
*_i.c
49+
*_p.c
50+
*_i.h
51+
*.ilk
52+
*.meta
53+
*.obj
54+
*.pch
55+
*.pdb
56+
*.pgc
57+
*.pgd
58+
*.rsp
59+
*.sbr
60+
*.tlb
61+
*.tli
62+
*.tlh
63+
*.tmp
64+
*.tmp_proj
65+
*.log
66+
*.vspscc
67+
*.vssscc
68+
.builds
69+
*.pidb
70+
*.svclog
71+
*.scc
72+
73+
# Chutzpah Test files
74+
_Chutzpah*
75+
76+
# Visual C++ cache files
77+
ipch/
78+
*.aps
79+
*.ncb
80+
*.opendb
81+
*.opensdf
82+
*.sdf
83+
*.cachefile
84+
85+
# Visual Studio profiler
86+
*.psess
87+
*.vsp
88+
*.vspx
89+
*.sap
90+
91+
# TFS 2012 Local Workspace
92+
$tf/
93+
94+
# Guidance Automation Toolkit
95+
*.gpState
96+
97+
# ReSharper is a .NET coding add-in
98+
_ReSharper*/
99+
*.[Rr]e[Ss]harper
100+
*.DotSettings.user
101+
102+
# JustCode is a .NET coding add-in
103+
.JustCode
104+
105+
# TeamCity is a build add-in
106+
_TeamCity*
107+
108+
# DotCover is a Code Coverage Tool
109+
*.dotCover
110+
111+
# NCrunch
112+
_NCrunch_*
113+
.*crunch*.local.xml
114+
nCrunchTemp_*
115+
116+
# MightyMoose
117+
*.mm.*
118+
AutoTest.Net/
119+
120+
# Web workbench (sass)
121+
.sass-cache/
122+
123+
# Installshield output folder
124+
[Ee]xpress/
125+
126+
# DocProject is a documentation generator add-in
127+
DocProject/buildhelp/
128+
DocProject/Help/*.HxT
129+
DocProject/Help/*.HxC
130+
DocProject/Help/*.hhc
131+
DocProject/Help/*.hhk
132+
DocProject/Help/*.hhp
133+
DocProject/Help/Html2
134+
DocProject/Help/html
135+
136+
# Click-Once directory
137+
publish/
138+
139+
# Publish Web Output
140+
*.[Pp]ublish.xml
141+
*.azurePubxml
142+
# TODO: Comment the next line if you want to checkin your web deploy settings
143+
# but database connection strings (with potential passwords) will be unencrypted
144+
*.pubxml
145+
*.publishproj
146+
147+
# NuGet Packages
148+
*.nupkg
149+
# The packages folder can be ignored because of Package Restore
150+
**/packages/*
151+
# except build/, which is used as an MSBuild target.
152+
!**/packages/build/
153+
# Uncomment if necessary however generally it will be regenerated when needed
154+
#!**/packages/repositories.config
155+
156+
# Microsoft Azure Build Output
157+
csx/
158+
*.build.csdef
159+
160+
# Microsoft Azure Emulator
161+
ecf/
162+
rcf/
163+
164+
# Microsoft Azure ApplicationInsights config file
165+
ApplicationInsights.config
166+
167+
# Windows Store app package directory
168+
AppPackages/
169+
BundleArtifacts/
170+
171+
# Visual Studio cache files
172+
# files ending in .cache can be ignored
173+
*.[Cc]ache
174+
# but keep track of directories ending in .cache
175+
!*.[Cc]ache/
176+
177+
# Others
178+
ClientBin/
179+
~$*
180+
*~
181+
*.dbmdl
182+
*.dbproj.schemaview
183+
*.pfx
184+
*.publishsettings
185+
node_modules/
186+
orleans.codegen.cs
187+
188+
# RIA/Silverlight projects
189+
Generated_Code/
190+
191+
# Backup & report files from converting an old project file
192+
# to a newer Visual Studio version. Backup files are not needed,
193+
# because we have git ;-)
194+
_UpgradeReport_Files/
195+
Backup*/
196+
UpgradeLog*.XML
197+
UpgradeLog*.htm
198+
199+
# SQL Server files
200+
*.mdf
201+
*.ldf
202+
203+
# Business Intelligence projects
204+
*.rdl.data
205+
*.bim.layout
206+
*.bim_*.settings
207+
208+
# Microsoft Fakes
209+
FakesAssemblies/
210+
211+
# GhostDoc plugin setting file
212+
*.GhostDoc.xml
213+
214+
# Node.js Tools for Visual Studio
215+
.ntvs_analysis.dat
216+
217+
# Visual Studio 6 build log
218+
*.plg
219+
220+
# Visual Studio 6 workspace options file
221+
*.opt
222+
223+
# Visual Studio LightSwitch build output
224+
**/*.HTMLClient/GeneratedArtifacts
225+
**/*.DesktopClient/GeneratedArtifacts
226+
**/*.DesktopClient/ModelManifest.xml
227+
**/*.Server/GeneratedArtifacts
228+
**/*.Server/ModelManifest.xml
229+
_Pvt_Extensions
230+
231+
# Paket dependency manager
232+
.paket/paket.exe
233+
234+
# FAKE - F# Make
235+
.fake/

‎templates/KnockoutSpa/ClientApp/boot.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import 'bootstrap';
2+
import 'bootstrap/dist/css/bootstrap.css';
3+
import './css/site.css';
4+
import * as ko from 'knockout';
5+
import appLayout from './components/app-layout/app-layout';
6+
7+
ko.components.register('app-layout', appLayout);
8+
ko.applyBindings();
9+
10+
// Basic hot reloading support. Automatically reloads and restarts the Knockout app each time
11+
// you modify source files. This will not preserve any application state other than the URL.
12+
declare var module: any;
13+
if (module.hot) {
14+
module.hot.dispose(() => {
15+
ko.cleanNode(document.body);
16+
17+
// TODO: Need a better API for this
18+
Object.getOwnPropertyNames((<any>ko).components._allRegisteredComponents).forEach(componentName => {
19+
ko.components.unregister(componentName);
20+
});
21+
});
22+
module.hot.accept();
23+
}

‎templates/KnockoutSpa/ClientApp/components/app-layout/app-layout.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div class='container-fluid'>
2+
<div class='row'>
3+
<div class='col-sm-3'>
4+
<nav-menu params='route: route'></nav-menu>
5+
</div>
6+
<div class='col-sm-9' data-bind='component: { name: route().page, params: route }'></div>
7+
</div>
8+
</div>

‎templates/KnockoutSpa/ClientApp/components/app-layout/app-layout.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import * as ko from 'knockout';
2+
import * as router from '../../router';
3+
4+
class AppLayoutViewModel {
5+
public route = router.instance().currentRoute;
6+
}
7+
8+
export default { viewModel: AppLayoutViewModel, template: require('./app-layout.html') };

‎templates/KnockoutSpa/ClientApp/components/counter-example/counter-example.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<h2>Counter</h2>
2+
3+
<p>This is a simple example of a Knockout component.</p>
4+
5+
<p>Current count: <strong data-bind='text: currentCount'></strong></p>
6+
7+
<button data-bind='click: incrementCounter'>Increment</button>

‎templates/KnockoutSpa/ClientApp/components/counter-example/counter-example.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import * as ko from 'knockout';
2+
3+
class CounterExampleViewModel {
4+
public currentCount = ko.observable(0);
5+
6+
public incrementCounter() {
7+
let prevCount = this.currentCount();
8+
this.currentCount(prevCount + 1);
9+
}
10+
}
11+
12+
export default { viewModel: CounterExampleViewModel, template: require('./counter-example.html') };

‎templates/KnockoutSpa/ClientApp/components/fetch-data/fetch-data.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<h1>Weather forecast</h1>
2+
3+
<p>This component demonstrates fetching data from the server.</p>
4+
5+
<p data-bind='ifnot: forecasts'><em>Loading...</em></p>
6+
7+
<table class='table' data-bind='if: forecasts'>
8+
<thead>
9+
<tr>
10+
<th>Date</th>
11+
<th>Temp. (C)</th>
12+
<th>Temp. (F)</th>
13+
<th>Summary</th>
14+
</tr>
15+
</thead>
16+
<tbody data-bind='foreach: forecasts'>
17+
<tr>
18+
<td data-bind='text: dateFormatted'></td>
19+
<td data-bind='text: temperatureC'></td>
20+
<td data-bind='text: temperatureF'></td>
21+
<td data-bind='text: summary'></td>
22+
</tr>
23+
</tbody>
24+
</table>

‎templates/KnockoutSpa/ClientApp/components/fetch-data/fetch-data.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import * as ko from 'knockout';
2+
3+
interface WeatherForecast {
4+
dateFormatted: string;
5+
temperatureC: number;
6+
temperatureF: number;
7+
summary: string;
8+
}
9+
10+
class FetchDataViewModel {
11+
public forecasts = ko.observableArray<WeatherForecast>();
12+
13+
constructor() {
14+
fetch('/api/SampleData/WeatherForecasts')
15+
.then(response => response.json())
16+
.then((data: WeatherForecast[]) => {
17+
this.forecasts(data);
18+
});
19+
}
20+
}
21+
22+
export default { viewModel: FetchDataViewModel, template: require('./fetch-data.html') };

‎templates/KnockoutSpa/ClientApp/components/home-page/home-page.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<h1>Hello, world!</h1>
2+
<p>Welcome to your new single-page application, built with:</p>
3+
<ul>
4+
<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>
5+
<li><a href='http://knockoutjs.com/'>Knockout.js</a> and <a href='http://www.typescriptlang.org/'>TypeScript</a> for client-side code</li>
6+
<li><a href='https://webpack.github.io/'>Webpack</a> for building and bundling client-side resources</li>
7+
<li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
8+
</ul>
9+
<p>To help you get started, we've also set up:</p>
10+
<ul>
11+
<li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
12+
<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>
13+
<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>
14+
<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>
15+
</ul>

‎templates/KnockoutSpa/ClientApp/components/home-page/home-page.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import * as ko from 'knockout';
2+
3+
class HomePageViewModel {
4+
}
5+
6+
export default { viewModel: HomePageViewModel, template: require('./home-page.html') };

0 commit comments

Comments
 (0)