Typoscript met KnockoutJS

Question

Typoscript met KnockoutJS

stemmen

132

Is er een monster van het gebruik van typoscript met KnockoutJS? Ik ben gewoon benieuwd hoe ze zouden samenwerken?

Bewerk

Hier is wat ik heb, lijkt te werken

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

}

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

Dit levert in de volgende Javascript:

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

knockout.js typescript

De vraag is gesteld op 02/10/2012 om 12:52
bron van user CallumVass

In andere talen...

6 antwoorden

stemmen

57

Ik maakte dit kleine interface om statische types te krijgen voor 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;
    };
}

Zet het in "Knockout.d.ts" en verwijzen het dan uit uw eigen bestanden. Zoals u kunt zien, het zou veel baat hebben bij generieke geneesmiddelen (die komen volgens de specs).

Ik heb enkele interfaces voor ko.observable (), maar ko.computed () en ko.observableArray () gemakkelijk worden toegevoegd in hetzelfde patroon. Update: Ik bevestigde de handtekeningen voor een abonnement () en toegevoegd voorbeelden van computertomografie () en observableArray ().

Om gebruik te maken van uw eigen bestand, voeg dit toe aan de top:

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

antwoordde op 02/10/2012 om 15:23
bron van user Sten L

stemmen

14

Probeer mijn realisatie van typoscript-interface verklaringen (met eenvoudige voorbeeld)
https://github.com/sv01a/TypeScript-Knockoutjs

antwoordde op 05/10/2012 om 06:47
bron van user Sv01a

stemmen

6

Niets zou veranderen in termen van de manier waarop knock-out bindingen worden verklaard in de markup maar we de intellisense goedheid zou krijgen zodra de interfaces zijn geschreven voor de knock-out bibliotheek. In dit verband zou werken net als de jQuery Sample , die een heeft logbestand met interfaces voor het grootste deel van de jQuery api .

Ik denk dat als je te ontdoen van de twee variabele declaraties voor ko en $ uw code zal werken. Deze zijn het verbergen van de werkelijke ko en $ variabelen die zijn gemaakt toen de knock-out en jQuery scripts geladen.

Ik moest dit doen om de haven van de Visual Studio template project om knock-out:

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>

antwoordde op 02/10/2012 om 15:02
bron van user Jeremy Danyow

stemmen

2

Ik gebruik https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/ en het heeft alle interfaces voor Knockout.

antwoordde op 17/08/2015 om 11:34
bron van user JavaScript Linq

stemmen

0

Ok dus gewoon gebruik maken van de volgende opdracht om de types knock-out of tds importeren.

npm install @types/knockout

Dit zal een @types directory in uw projecten node_modules directory en de index knockout typedefinitie bestand aan te maken zal worden in een map met de naam knock-out. Vervolgens wordt door middel van een triple-slash verwijzing naar het bestand types. Dit zal groot IDE en typoscript functies.

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

Tot slot, gewoon gebruik maken van een verklaren verklaring aan de ko variabele in omvang te brengen. Dit is sterk getypeerde zo hello intellisense.

declare var ko: KnockoutStatic;

Dus nu kun je KO gebruiken net als in uw JavaScript-bestanden.

Ik hoop dat dit helpt.

antwoordde op 04/10/2017 om 22:35
bron van user SimperT

George Mavritsakis · Accepted Answer · 2012-10-26 11:46

stemmen

105

De auteur van de vraag accepteerde dit antwoord als de beste.

Kijk naar DefinitelyTyped .

"Typescript typedefinities opslagplaats voor populaire JavaScript-bibliotheken"

antwoordde op 26/10/2012 om 11:46
bron van user George Mavritsakis