Hier geht’s darum wie man in einem ASP.Net(MVC5) Projekt, knockoutjs , typescript und requirejs benutzen kann. Am Ende werden wir einen knockout-Komponente schreiben und dies in einem MVC5-View einsetzen.

Mein erster Empfehlung ist die JavaScript- und CSS-Bibliotheken nicht mit Nuget sondern per npm und bower zu installieren.

installiere ein paar Bibliotheken

wir brauchen folgende Bibliotheken um arbeiten zu können:

• knockout
• requirejs & requirejs-text (plugin)
• bootstrap (mit MVC5 Projektvorlage schon installiert)
• jquery (mit MVC5 Projektvorlage schon installiert)

Wir wollen unsere JavaScripts in Typescript entwickeln daher werden wir so genannte Typings von eingesetzten Bibliotheken brauchen.

RequireJS

Als erster wollen wir requirejs integrieren. Hierfür müssen wir erst “require.js” installieren und “_Layout.cshtml” anpassen.

Wie vorgeschlagen wir installieren es mit Zuhilfenahme von bower:

bower install requirejs --save
bower install requirejs-text --save

“requirejs-text” werden wir brauchen um die html-templates für knockout-Komponenten zuladen.(kommt weiter unten)

Als nächstes erzeugen wir einen Konfigurationsfile für requirejs.  Obwohl diese Datei jegliche Namen haben darf, es ist empfehlenswert einen Namen zu wählen , mit der man schnell auf dem Inhalt kommt. Ich benutze hierfür den Namen : “require-config.ts”. Hier ein möglicher File: (Die Versionen von jeweiligen Files muss man noch unter Umständen anpassen)

“baseUrl” stellt fest wo require mit der Suche nach Scripts anfangen soll. d.h. Alle angaben an require werden relative zu diesem Eintrag berechnet.

require.config({
    baseUrl: "/Scripts/",
    paths: {
        jquery: "jquery",
        bootstrap: "bootstrap.min"
    },
    shim: {
        "bootstrap": ["jquery"]
    }
});

Jetzt sollten wir fehlern sehen, die uns Visualstudio anzeigt. Fehlermeldungen beziehen sich darauf dass einen Objekt namens “require” nicht existiert. ( ein großer Vorteil von Typescript). Es ist jetzt an der Zeit so gennanten TypeScript Definition Files zu installieren. Am besten nehmen dafür npm zu hilfe.

(zur Zeit der erstellung dieses Artikels Nuget-Version war nicht mit neue TypeScript-Kompiler kompilierungsfähig )

npm install @types/requirejs --save
npm install @types/bootstrap --save
npm install @types/jquery --save
npm install @types/knockout --save

Spätestens jetzt sollten die Fehlermeldung nicht mehr da sein.

Jetzt geht’s darum unsere Layout so um zu setzen dass es die nötige Teile durch neue requirejs bezieht. Dafür ersetzen wir in _Layout.cshtml folgende Zeilen:

<script src="~/Scripts/require.js"></script>
    <script src="~/Scripts/require/config.js"></script>
    @* load JQuery and Bootstrap *@
    <script>
        require(["jquery", "bootstrap"]);
    </script>
    @RenderSection("scripts", required: false)

So jetzt können wir in alle Views “requirejs” benutzen.