Как создать базовый проект TypeScript, используя jQuery, RequireJS и KnockoutJS

Ответ 1

Отказ

В этом практическом руководстве будет показан " способ создания базового веб-сайта с использованием TypeScript, jQuery, KnockoutJS и RequireJS. Есть много других способов сделать это.

Начало работы

Установить расширение Visual Studio

Установка расширения Visual Studio 2012 - TypeScript для Microsoft Visual Studio 2012 PowerTool 1.0.1.0 http://visualstudiogallery.msdn.microsoft.com/ac357f1e-9847-46ac-a4cf-520325beaec1

Создать новый проект Visual Studio

• Начните визуальную студию 2012 года.
• Выберите пункт меню "Файл" → "Создать" → "Проект..."
• Перейдите к "Шаблонам" → "Другие языки" → "TypeScript" (это фактически создает файл проекта с расширением .csproj - weird)
• Выберите тип проекта "Приложение HTML с TypeScript"

Cleanup

Удалить файл app.css, app.ts из проекта

Добавить компоненты

Используя NuGet, добавьте...

• RequireJS (я выбрал версию 2.1.15 для этого учебника)
• KnockoutJS (я выбрал версию 3.2.0 для этого урока)
• jQuery (я выбрал версию 2.1.1 для этого учебника)
• requirejs.TypeScript.DefinitelyTyped (я выбрал версию 0.2.0 на
  Джейсон Джарретт для этого урока. он установил файл TypeScript def Джошем Болдуином - версия 2.1.8)
• knockout.TypeScript.DefinitelyTyped (я выбрал версию 0.5.7 на
  Джейсон Джарретт для этого учебника)

Настройка папок проекта

Создайте папки проекта в корне проекта

• Применение
• Модели
• ViewModels

Создайте базовую модель TypeScript

Добавить TypeScript файл в папку проекта "Модели"

• Щелкните правой кнопкой мыши папку "Модели" в обозревателе решений
• выберите пункт контекстного меню "Добавить" → "Новый элемент..."
• В левой панели выделите "Visual С#"
• В правой панели выделите "TypeScript" Файл "
• В текстовом поле "Имя файла" введите "myTestModel.ts". Нажмите кнопку "Добавить"

Изменить файл "myTestModel.ts"

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

Создайте модель представления TypeScript

Добавить TypeScript файл в папку проекта "ViewModels"

• Щелкните правой кнопкой мыши папку "ViewModels" в обозревателе решений
• выберите пункт контекстного меню "Добавить" → "Новый элемент..."
• В левой панели выделите "Visual С#"
• В правой панели выделите "TypeScript" Файл "
• В текстовом поле "Имя файла" введите "myViewModel.ts"
• Нажмите кнопку "Добавить"

Измените файл 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;

Добавить конфигурацию

Добавить файл конфигурации RequireJS

• Щелкните правой кнопкой мыши папку проекта "Приложение" в обозревателе решений
• выберите пункт контекстного меню "Добавить" → "Новый элемент..."
• В левой панели выделите "Visual С#"
• В правой панели выделите "TypeScript" Файл "
• В текстовом поле "Имя файла" введите "require-config.ts"
• Нажмите кнопку "Добавить"

Изменить файл "require-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);
        });
    });
});

Изменить существующий файл index.html

Необходимо согласовать представление с моделью просмотра.

<!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>

Запустить его

OK - время, чтобы попробовать. Завершить, установить некоторые точки останова в файлах .ts и нажать F5.

Вывод:

Как вы можете видеть, в примере не так много кода. Если вы запустите пример и нажмите кнопку, вы найдете кнопку на index.html привязана к методу в myViewModel.ts, называемом myButton_Click. Кроме того, текстовое поле myStringTest2 и myNumberTest привязаны к переменным, определенным в модели представления.

Файл require-config.ts содержит список подключенных зависимостей. Строка "knockout.applyBindings(viewModel)" связывает экземпляр myViewModel с представлением html.

Обратите внимание, как TypeScript позволяет объявлять переменные с типом данных?

Я надеюсь, что этот учебник поможет. Просто накладывание нескольких частей на стол помогло мне визуализировать, как эти компоненты играют вместе. В KnockoutJS есть классные плагины, такие как отображение нокаутом, что позволяет привязать данные, полученные от веб-службы, непосредственно к модели представления без промежуточного преобразования или перевода. Кроме того, knockoutjs может поддерживать шаблонизацию - по-видимому, могут быть реализованы мастер-страницы.

Для полноты я добавлю папку проекта под названием "Виды" и держу там свой html. Я думаю, что это более традиционно для разработки MVC/MVVM. URL-адрес, имеющий .html, все еще навязывает мне. Мне нравится маршрутизация в стиле MVC (без расширений файлов), но это тоже очень круто - особенно потому, что его не что иное, как HTML и JavaScript - по-настоящему перекрестная платформа. Помимо вызовов веб-сервисов (не включенных в пример), нет обратных передач, обработка клиентской части выполняется быстро.

Пожалуйста, не стесняйтесь комментировать...