Write some code
Let’s write our first TypeScript file using Knockout. First, create a new file in your src directory named hello.ts.
1 2 3 4 5 6 7 8 9 10 11 12 13 | import * as ko from "knockout";class HelloViewModel { language: KnockoutObservable<string> framework: KnockoutObservable<string> constructor(language: string, framework: string) { this.language = ko.observable(language); this.framework = ko.observable(framework); }}ko.applyBindings(new HelloViewModel("TypeScript", "Knockout")); |
Next, we’ll create a file named require-config.ts in src as well.
1 2 3 4 5 6 | declare var require: any;require.config({ paths: { "knockout": "externals/knockout-3.4.0", }}); |
This file will tell RequireJS where to find Knockout when we import it, just like we did in hello.ts. Any page that you create should include this immediately after RequireJS, but before importing anything else. To get a better understanding of this file and how to configure RequireJS, you can read up on its documentation.
We’ll also need a view to display our HelloViewModel. Create a file at the root of proj named index.html with the following contents:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Hello Knockout!</title> </head> <body> <p> Hello from <strong data-bind="text: language">todo</strong> and <strong data-bind="text: framework">todo</strong>! </p> <p>Language: <input data-bind="value: language" /></p> <p>Framework: <input data-bind="value: framework" /></p> <script src="./externals/require.js"></script> <script src="./built/require-config.js"></script> <script> require(["built/hello"]); </script> </body></html> |
Notice there are three script tags. First, we’re including RequireJS itself. Then we’re mapping the paths of our external dependencies in require-config.js so that RequireJS knows where to look for them. Finally, we’re calling require with a list of modules we’d like to load.
Please login to continue.