Búsqueda de sitios web

javascript - Declarar la configuración de Sammy js usando TypeScript

Solo estoy pasando por el tutorial de KnockOut.js pero reemplazando el código JS con TS. Me quedé atascado en el siguiente código al agregar SammyJS. ¿Alguien puede aconsejar cómo el código de la función Sammy en TS?

function WebmailViewModel() {
// Data
var self = this;
self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
self.chosenFolderId = ko.observable();
self.chosenFolderData = ko.observable();
self.chosenMailData = ko.observable();

// Behaviours    
self.goToFolder = function(folder) { location.hash = folder };
self.goToMail = function(mail) { location.hash = mail.folder + '/' + mail.id };

// Client-side routes    
Sammy(function() {
    this.get('#:folder', function() {
        self.chosenFolderId(this.params.folder);
        self.chosenMailData(null);
        $.get("/mail", { folder: this.params.folder }, self.chosenFolderData);
    });

    this.get('#:folder/:mailId', function() {
        self.chosenFolderId(this.params.folder);
        self.chosenFolderData(null);
        $.get("/mail", { mailId: this.params.mailId }, self.chosenMailData);
    });

    this.get('', function() { this.app.runRoute('get', '#Inbox') });
}).run();    
};

ko.applyBindings(new WebmailViewModel());

El tutorial que estoy siguiendo está aquí http://learn.knockoutjs.com/#/?tutorial=webmail

Gracias

Respuesta #1

No estoy seguro de si esto responde a tu pregunta, pero potencialmente puedes aprovechar un archivo de definición de TypeScript que describe a Sammy aquí https://github.com/borisyankov/DefinitelyTyped/blob/master/sammyjs/sammyjs.d.ts Esto debería tener suficiente de la API de Sammy para que puedas continuar con tu tutorial.

Descargue el archivo de definición y haga referencia con un comentario especial similar al siguiente.

///<reference path="sammyjs/sammyjs.d.ts" />

Respuesta #2

Sé que esta es una pregunta antigua, pero esto me causó suficiente dolor como para justificar una recomendación para los futuros visitantes.

He reescrito el código de ejemplo anterior en TypeScript.

/// <reference path="../Scripts/typings/jquery/jquery.d.ts" />
/// <reference path="../Scripts/typings/Sammy/Sammy.d.ts" />
import sammy = require("sammy");
class WebmailViewModel
{
    // Data
    public folders: Array<string> = ['Inbox', 'Archive', 'Sent', 'Spam'];
    public chosenFolderId: KnockoutObservable<any> = ko.observable();
    public chosenFolderData: KnockoutObservable<any> = ko.observable();
    public chosenMailData: KnockoutObservable<any> = ko.observable();

    // Behaviours    
    public goToFolder = function (folder) { window.location.hash = folder };
    public goToMail = function (mail) { window.location.hash = mail.folder + '/' + mail.id };

    // Client-side routes    
    public SammyApp: sammy.Application =
    Sammy().get('#:folder', context =>
    {
        this.chosenFolderId(context.params.folder);
        this.chosenMailData(null);
        $.get("/mail", { folder: context.params.folder }, this.chosenFolderData);
    }).get('#:folder/:mailId', context =>
    {
        this.chosenFolderId(context.params.folder);
        this.chosenFolderData(null);
        $.get("/mail", { mailId: context.params.mailId }, this.chosenMailData);
    }).get('', context =>
    {
        context.app.runRoute('get', '#Inbox');
    }).run();
};

Luego, en $(document).ready()

var viewModel = new WebmailViewModel;
ko.applyBindings(viewModel);

Muchas gracias a @Vladimir, cuya respuesta a la pregunta 19395335 en Stack Overflow me llevó a la solución.

Salud.

Artículos relacionados