Géppel együtt KnockoutJS

Question

Géppel együtt KnockoutJS

szavazat

132

Van olyan minta felhasználásával géppel együtt KnockoutJS? Csak kíváncsi vagyok, hogy hogyan fognak együtt dolgozni?

szerkesztése

Itt van, amit én, úgy tűnik, működik

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

}

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

Ez generálja a következő 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

A kérdést 02/10/2012 12:52
a forrás felhasználó CallumVass

Más nyelveken...

6 válasz

szavazat

57

Csináltam ezt a kis felületet kap statikus típusok 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;
    };
}

Tedd „Knockout.d.ts”, majd hivatkozni, hogy a saját fájljait. Mint látható, ez nagy előnyt jelent a generikus (amely jönnek szerint a szemüveg).

Csak egy pár interfészek ko.observable (), de ko.computed () és ko.observableArray () könnyen hozzá ugyanazt a mintát. Frissítés: rögzítettem aláírásokat feliratkozás (), majd hozzáadjuk példák kiszámításra () és observableArray ().

Ahhoz, hogy használni a saját fájlt, adjuk hozzá ezt a tetején:

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

Válaszolt 02/10/2012 15:23
a forrás felhasználó Sten L

szavazat

14

Próbáld meg megvalósítása géppel interfész nyilatkozatok (egyszerű példa)
https://github.com/sv01a/TypeScript-Knockoutjs

Válaszolt 05/10/2012 06:47
a forrás felhasználó Sv01a

szavazat

6

Semmi sem fog változni szempontjából az útból knockout kötések nyilvánítják a jelölésben azonban kapnánk IntelliSense jóság, ha a felületek vannak írva a kieséses könyvtárban. Ebben a tekintetben, hogy működni fog, mint a jquery minta , amely egy géppel tartalmazó fájlt felületek legtöbb jQuery API .

Azt hiszem, ha megszabadulni a két változó nyilatkozatok ko és $ a kód működni fog. Ezek bujkál a tényleges ko és $ változók voltak létre, amikor az egyenes kieséses és jQuery szkriptek betölteni.

Meg kellett tennem ezt a port a Visual Studio sablon projekt kieséses:

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>

Válaszolt 02/10/2012 15:02
a forrás felhasználó Jeremy Danyow

szavazat

2

Én használ https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/ és azt minden interfészek Knockout.

Válaszolt 17/08/2015 11:34
a forrás felhasználó JavaScript Linq

szavazat

0

Ok, így csak használja a következő parancsot, hogy importálja a kieséses típust vagy tds.

npm install @types/knockout

Ez létrehoz egy könyvtárat @types a projektekben node_modules könyvtárba és az index kieséses típusmeghatározásnak fájl lesz nevû könyvtárban kiütéssel. Ezután egy tripla-slash hivatkozás típusú fájlt. Ez ad nagy IDE és géppel jellemzői.

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

Végül csak használ egy állapítsa nyilatkozatot, hogy a ko változót körét. Ez erősen típusos, így szia IntelliSense.

declare var ko: KnockoutStatic;

Tehát most akkor használja KO akárcsak a javascript fájlokat.

Remélem ez segít.

Válaszolt 04/10/2017 22:35
a forrás felhasználó SimperT

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

szavazat

105

A kérdés szerzője ezt a választ a legjobbnak fogadta el.

Nézd DefinitelyTyped .

„Géppel típusdefiníciókat adattára népszerű JavaScript könyvtárak”

Válaszolt 26/10/2012 11:46
a forrás felhasználó George Mavritsakis