Initial KnockoutSpa template

templates/KnockoutSpa/ClientApp/components/fetch-data/fetch-data.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>

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

@@ -0,0 +1,22 @@
+import * as ko from 'knockout';
+
+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())
+            .then((data: WeatherForecast[]) => {
+                this.forecasts(data);
+            });
+    }
+}
+
+export default { viewModel: FetchDataViewModel, template: require('./fetch-data.html') };