Comment créer un projet de base dactylographié en utilisant jQuery, Requerjs, et KnockoutJS

Avertissement

Ce sera show "a" façon de construire un site Web de base en utilisant TypeScript, jQuery, KnockoutJS, et Requerjs. Il existe de nombreuses autres façons de le faire.

Pour Commencer

Installer Visual Studio Extension

installer Visual Studio 2012 extension-TypeScript pour Microsoft Visual Studio 2012 PowerTool 1.0.1.0 http://visualstudiogallery.msdn.microsoft.com/ac357f1e-9847-46ac-a4cf-520325beaec1

---

Créer un nouveau Projet Visual Studio

• Démarrez visual studio 2012.
• sélectionner l'élément du menu"le Fichier" ->"" ->"Projet..."
• Accédez à "Modèles" ->"Autres Langues" ->" dactylographié" (ce réellement crée un fichier de projet avec l'extension .csproj - bizarre)
• choisir le type de projet "HTML Application with TypeScript"

---

Nettoyage

Supprimer le fichier app.CSS, app.ts du projet

---

Ajouter Des Composants

en utilisant NuGet, add...

• RequireJS(j'ai choisi la version 2.1.15 pour ce tutoriel)
• KnockoutJS (j'ai choisi la version 3.2.0 pour ce tutoriel)
• jQuery (j'ai choisi la version 2.1.1 Pour ce tutoriel)
• requirejs.Tapuscrit.DefinitelyTyped(j'ai choisi la version 0.2.0
  
  Jason Jarrett pour ce tutoriel. il a installé un fichier DEF dactylographié by Josh Baldwin-version 2.1.8)
• ko.Tapuscrit.DefinitelyTyped(j'ai choisi la version 0.5.7 par
  
  Jason Jarrett pour ce tutoriel)

---

Configuration Des Dossiers De Projet

Créer des dossiers de projet à la racine du projet

• Application
• Modèles
• Viewmodel

---

Créer une base de Tapuscrit modèle

Ajouter un fichier dactylographié au dossier de projet "Models"

• cliquez avec le bouton droit de la souris sur le dossier "Models" l'Explorateur de solutions
• menu contextuel élément "Ajouter" - > " Nouvel élément..."
• dans le volet de gauche, surlignez " Visual C#"
• dans le volet de droite, mettez en surbrillance "fichier dactylographié"
• dans la zone de texte Nom du fichier, entrez " myTestModel.ts", Cliquez sur le bouton "Ajouter"

modifier le fichier " myTestModel.ts"

class myTestModel {
    public fieldZ: string;
    public fieldY: string;
    public fieldX: number;
}
export=myTestModel;

---

Créer un Tapuscrit vue-modèle

Ajouter un fichier dactylographié au dossier du projet "Viewmodel"

• cliquez avec le bouton droit de la souris sur le dossier "ViewModels" dans L'Explorateur de solutions
• menu contextuel élément "Ajouter" - > " Nouvel élément..."
• dans le volet de gauche, surlignez " Visual C#"
• dans le volet de droite, mettez en surbrillance "fichier dactylographié"
• dans la zone de texte Nom du fichier, entrez " myViewModel.ts"
• Cliquez sur le bouton "Ajouter"

modifier le fichier myViewModel.ts...

/// <reference path="../Scripts/typings/knockout/knockout.d.ts" />

import myTestModel = require("Models/myTestModel");
import ko = require("knockout");

class myViewModel {
    public myString: KnockoutObservable<string>;
    public myNumber: KnockoutObservable<number>;
    public myComplexObject: KnockoutObservable<myTestModel>;

    constructor() {
        this.myString = ko.observable("some test data");
        this.myNumber = ko.observable(987);

        var tempComplexObject = new myTestModel;
        tempComplexObject.fieldZ = "some bogus test data";
        tempComplexObject.fieldY = "another bogus test data";
        tempComplexObject.fieldX = 123;

        this.myComplexObject = ko.observable(tempComplexObject);
    }

    myButton_Click() {
        alert("I was clicked");
    }
}
export=myViewModel;

---

Ajouter configuration

ajouter le fichier de configuration Requerjs

• clic droit sur le dossier de projet "Application" dans L'Explorateur de solutions
• menu contextuel élément "Ajouter" - > " Nouvel élément..."
• dans le volet de gauche, surlignez " Visual C#"
• dans le volet de droite, mettez en surbrillance "fichier dactylographié"
• dans la zone de texte Nom du fichier, entrez "require-config.ts"
• Cliquez sur le bouton "Ajouter"

Modifier le fichier "exiger le-config.ts"

/// <reference path="../Scripts/typings/requirejs/require.d.ts" />

require.config({
    baseUrl: "",
    paths: {
        "jQuery": "Scripts/jquery-2.1.1",
        "knockout": "Scripts/knockout-3.2.0.debug",
        "myViewModel": "ViewModels/myViewModel"
    },
    shim: {
        "jQuery": {
            exports: "$"
        }
    },
});

require(["jQuery"], function ($) {
    $(document).ready(function () {
        require(["knockout", "myViewModel"], (knockout, myViewModel) => {
            var viewModel = new myViewModel;
            knockout.applyBindings(viewModel);
        });
    });
});

---

modifier l'index des fichiers existants.html

Besoin d'aligner la vue avec le modèle de vue.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>TypeScript HTML App</title>
        <script data-main="Application/require-config" src="Scripts/require.js"></script>
    </head>
    <body>
        <h1>TypeScript HTML App</h1>

        <div id="myStringTest" data-bind="text: myString"></div>
        <input id="myStringTest2" data-bind="value: myString" />
        <input id="myNumberTest" data-bind="value: myNumber" />
        <input id="myComplexObjectTest" data-bind="value: myComplexObject().fieldZ" />
        <button id="myMethodTest" data-bind="click: myButton_Click" >click me</button>
    </body>
</html>

---

Exécuter

OK - le temps de donner un essai. Terminé, mettez quelques points de rupture dans le .les fichiers ts, et appuyez sur F5.

---

Conclusion:

Comme vous pouvez le voir, il n'y a pas beaucoup de code dans l'exemple. Si vous exécutez l'exemple, et cliquez sur le bouton que vous trouverez le bouton indice.html est lié à une méthode dans myViewModel.il s'appelle myButton_Click. En outre, la zone de texte myStringTest2, et myNumberTest sont liés aux variables définies dans le modèle de vue.

Les config.ts fichier contient la liste des dépendances qui sont connectées. La ligne "knock-out.applyBindings (viewModel)" associe l'instance de myViewModel à la vue html.

notez comment le caractère typographique permet de déclarer des variables avec un type de données?

j'espère que ce guide vous aide. Le simple fait de poser plusieurs pièces sur la table m'a aidé à visualiser comment ces composants jouent ensemble. KnockoutJS a quelques plug-ins cool - tels que knockout-mapping - qui permet aux données extraites d'un service web d'être directement lié au modèle de vue sans transformation intermédiaire ou de traduction. En outre, knockoutjs peut prendre en charge templating - probablement pour que les pages maître puissent être implémentées.

pour être complet, je vais ajouter un dossier de projet appelé Views, et tenir mon html là. Je pense que c'est plus traditionnel pour le développement MVC/MVVM. L'url ayant .html me harcèle encore. J'aime le routage de style MVC (pas d'extension de fichier), mais c'est assez cool aussi - surtout depuis son rien plus que HTML et JavaScript - vraiment plate-forme cross. Mis à part les appels des services web (non inclus dans l'exemple), il n'y a pas de postbacks, le traitement côté client est rapide.

n'hésitez pas à commenter...