{"id":531,"date":"2017-10-17T12:05:46","date_gmt":"2017-10-17T10:05:46","guid":{"rendered":"http:\/\/blog.ghbss.de\/?page_id=531"},"modified":"2017-10-25T04:14:00","modified_gmt":"2017-10-25T02:14:00","slug":"mvc5-knockout-typescript-requirejs","status":"publish","type":"page","link":"https:\/\/blog.ghbss.de\/?page_id=531","title":{"rendered":"MVC5, Knockout, Typescript &amp; RequireJs"},"content":{"rendered":"<p>Hier geht\u2019s 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.<\/p>\n<p><em><strong>Mein erster Empfehlung ist die JavaScript- und CSS-Bibliotheken nicht mit Nuget sondern per npm und bower zu installieren.<\/strong><\/em><\/p>\n<h1>installiere ein paar Bibliotheken<\/h1>\n<p>wir brauchen folgende Bibliotheken um arbeiten zu k\u00f6nnen:<\/p>\n<ul>\n<li>knockout<\/li>\n<li>requirejs &amp; requirejs-text (plugin)<\/li>\n<li>bootstrap (mit MVC5 Projektvorlage schon installiert)<\/li>\n<li>jquery (mit MVC5 Projektvorlage schon installiert)<\/li>\n<\/ul>\n<p>Wir wollen unsere JavaScripts in Typescript entwickeln daher werden wir so genannte Typings von eingesetzten Bibliotheken brauchen.<\/p>\n<h1>RequireJS<\/h1>\n<p>Als erster wollen wir requirejs integrieren. Hierf\u00fcr m\u00fcssen wir erst \u201c<a href=\"requirejs.org\">require.js<\/a>\u201d installieren und \u201c_Layout.cshtml\u201d anpassen.<\/p>\n<p>Wie vorgeschlagen wir installieren es mit Zuhilfenahme von bower:<\/p>\n<pre>bower install requirejs --save<br>bower install requirejs-text --save<\/pre>\n<p>\u201crequirejs-text\u201d werden wir brauchen um die html-templates f\u00fcr knockout-Komponenten zuladen.(kommt weiter unten)<\/p>\n<p>Als n\u00e4chstes erzeugen wir einen Konfigurationsfile f\u00fcr requirejs.&nbsp; Obwohl diese Datei jegliche Namen haben darf, es ist empfehlenswert einen Namen zu w\u00e4hlen , mit der man schnell auf dem Inhalt kommt. Ich benutze hierf\u00fcr den Namen : \u201crequire-config.ts\u201d. Hier ein m\u00f6glicher File: (Die Versionen von jeweiligen Files muss man noch unter Umst\u00e4nden anpassen)<\/p>\n<p><strong>\u201cbaseUrl\u201d stellt fest wo require mit der Suche nach Scripts anfangen soll. d.h. Alle angaben an require werden relative zu diesem Eintrag berechnet.<\/strong><\/p>\n<pre>require.config({\n    baseUrl: \"\/Scripts\/\",\n    paths: {\n        jquery: \"jquery\",\n        bootstrap: \"bootstrap.min\"\n    },\n    shim: {\n        \"bootstrap\": [\"jquery\"]\n    }\n});<\/pre>\n<p>Jetzt sollten wir fehlern sehen, die uns Visualstudio anzeigt. Fehlermeldungen beziehen sich darauf dass einen Objekt namens \u201crequire\u201d nicht existiert. ( ein gro\u00dfer Vorteil von Typescript). Es ist jetzt an der Zeit so gennanten <strong><em>TypeScript Definition Files<\/em><\/strong> zu installieren. Am besten nehmen daf\u00fcr npm zu hilfe.<\/p>\n<p>(zur Zeit der erstellung dieses Artikels Nuget-Version war nicht mit neue TypeScript-Kompiler kompilierungsf\u00e4hig )<\/p>\n<pre>npm install @types\/requirejs --save<br>npm install @types\/bootstrap --save<br>npm install @types\/jquery --save<br>npm install @types\/knockout --save<\/pre>\n<p>Sp\u00e4testens jetzt sollten die Fehlermeldung nicht mehr da sein.<\/p>\n<p>Jetzt geht\u2019s darum unsere Layout so um zu setzen dass es die n\u00f6tige Teile durch neue requirejs bezieht. Daf\u00fcr ersetzen wir in _Layout.cshtml folgende Zeilen:<\/p>\n<pre>&lt;script src=\"~\/Scripts\/require.js\"&gt;&lt;\/script&gt;\n    &lt;script src=\"~\/Scripts\/require\/config.js\"&gt;&lt;\/script&gt;\n    @* load JQuery and Bootstrap *@\n    &lt;script&gt;\n        require([\"jquery\", \"bootstrap\"]);\n    &lt;\/script&gt;\n    @RenderSection(\"scripts\", required: false)<\/pre>\n<p>So jetzt k\u00f6nnen wir in alle Views \u201c<strong>requirejs<\/strong>\u201d benutzen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hier geht\u2019s 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 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":270,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-531","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blog.ghbss.de\/index.php?rest_route=\/wp\/v2\/pages\/531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.ghbss.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blog.ghbss.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blog.ghbss.de\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.ghbss.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=531"}],"version-history":[{"count":13,"href":"https:\/\/blog.ghbss.de\/index.php?rest_route=\/wp\/v2\/pages\/531\/revisions"}],"predecessor-version":[{"id":546,"href":"https:\/\/blog.ghbss.de\/index.php?rest_route=\/wp\/v2\/pages\/531\/revisions\/546"}],"up":[{"embeddable":true,"href":"https:\/\/blog.ghbss.de\/index.php?rest_route=\/wp\/v2\/pages\/270"}],"wp:attachment":[{"href":"https:\/\/blog.ghbss.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}