knockout.js - framework - knockout js data bind multiple attributes

TypeScript con KnockoutJS

Question

¿Hay alguna muestra de uso de TypeScript con KnockoutJS? Tengo curiosidad sobre cómo funcionarían juntos?

Editar

Esto es lo que tengo, parece funcionar

declare var ko: any;
declare var $: any;
class ViewModel {
    x = ko.observable(10);
    y = ko.observable(10);

}

$(() => {
    ko.applyBindings(new ViewModel());
});

Esto genera en el siguiente Javascript:

var ViewModel = (function () {
    function ViewModel() {
        this.x = ko.observable(10);
        this.y = ko.observable(10);
    }
    return ViewModel;
})();
$(function () {
    ko.applyBindings(new ViewModel());
});

Answer 1

De acuerdo, solo use el siguiente comando para importar los tipos o tics knockout.

npm install @types/knockout

Esto creará un directorio @types en su directorio de node_modules de proyectos y el archivo de definición de tipo de knockout de índice estará en un directorio llamado knockout. A continuación, a través de una referencia de triple barra al archivo de tipos. Esto proporcionará excelentes funciones de IDE y TypeScript.

/// <reference path="../node_modules/@types/knockout/index.d.ts" />

Finalmente, solo use una declaración declare para poner la variable ko en el alcance. Esto es fuertemente tipado así que hola intellisense.

declare var ko: KnockoutStatic;

Así que ahora puedes usar KO como en tus archivos de JavaScript.

Espero que esto ayude.

Answer 2

Estoy usando https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/ y tiene todas las interfaces para Knockout.

Answer 3

Hice esta pequeña interfaz para obtener tipos estáticos para Knockout:

interface ObservableNumber {
        (newValue: number): void;               
        (): number;                             
        subscribe: (callback: (newValue: number) => void) => void;
}
interface ObservableString {
        (newValue: string): void;               
        (): string;                             
        subscribe: (callback: (newValue: string) => void) => void;
}
interface ObservableBool {
    (newValue: bool): void;             
    (): bool;                               
    subscribe: (callback: (newValue: bool) => void) => void;
}

interface ObservableAny {
    (newValue: any): void;              
    (): any;                                
    subscribe: (callback: (newValue: any) => void) => void;
}

interface ObservableStringArray {
    (newValue: string[]): void;
    (): string[];
    remove: (value: String) => void;
    removeAll: () => void;
    push: (value: string) => void;
    indexOf: (value: string) => number;
}

interface ObservableAnyArray {
    (newValue: any[]): void;
    (): any[];
    remove: (value: any) => void;
    removeAll: () => void;
    push: (value: any) => void;
}

interface Computed {
    (): any;
}

interface Knockout {
    observable: {
        (value: number): ObservableNumber;
        (value: string): ObservableString;
        (value: bool): ObservableBool;
        (value: any): ObservableAny;
    };
    observableArray: {
        (value: string[]): ObservableStringArray;
        (value: any[]): ObservableAnyArray;
    };
    computed: {
        (func: () => any): Computed;
    };
}

Póngalo en "Knockout.d.ts" y luego hágalo desde sus propios archivos. Como puede ver, se beneficiaría enormemente de los genéricos (que vienen de acuerdo con las especificaciones).

Solo hice algunas interfaces para ko.observable (), pero ko.computed () y ko.observableArray () se pueden agregar fácilmente en el mismo patrón. Actualización: arreglé las firmas para subscribe () y agregué ejemplos de Computed () y observableArray ().

Para utilizar desde su propio archivo, agregue esto en la parte superior:

/// <reference path="./Knockout.d.ts" />
declare var ko: Knockout;

Answer 4

Mire DefinitelyTyped .

"Repositorio de definiciones de tipos de TypeScript para bibliotecas populares de JavaScript"

Answer 5

Nada cambiaría en términos de la forma en que se declaran los enlaces knockout en el marcado; sin embargo, obtendríamos la bondad intellisense una vez que las interfaces se escriban para la biblioteca knockout. A este respecto, funcionaría igual que jquery Sample , que tiene un archivo de texto que contiene interfaces para la mayoría de las API de jQuery .

Creo que si eliminas las dos declaraciones variables para ko y $ tu código funcionará. Estos ocultan las variables ko y $ reales que se crearon cuando se cargaron los scripts knockout y jquery.

Tuve que hacer esto para portar el proyecto de la plantilla de estudio visual a knockout:

app.ts:

class GreeterViewModel {
    timerToken: number;
    utcTime: any;

    constructor (ko: any) { 
        this.utcTime = ko.observable(new Date().toUTCString());
        this.start();
    }

    start() {
        this.timerToken = setInterval(() => this.utcTime(new Date().toUTCString()), 500);
    }
}

window.onload = () => {
    // get a ref to the ko global
    var w: any;
    w = window;
    var myKO: any;
    myKO = w.ko;

    var el = document.getElementById(''content'');
    myKO.applyBindings(new GreeterViewModel(myKO), el);
};

default.htm:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="Scripts/knockout-2.1.0.debug.js" type="text/javascript"></script>
    <script src="app.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <div id="content" data-bind="text: utcTime" />
</body>
</html>

Answer 6

Probar mi realización de declaraciones de interfaz de TypeScript (con un ejemplo simple)
https://github.com/sv01a/TypeScript-Knockoutjs