Γραφομηχανή με KnockoutJS

ψήφοι
132

Υπάρχει κάποιο δείγμα χρησιμοποιώντας γραφομηχανή με KnockoutJS εκεί; Είμαι απλά περίεργος για το πώς θα συνεργαστούν;

Επεξεργασία

Εδώ είναι αυτό που έχω, φαίνεται να λειτουργεί

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

}

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

Αυτό δημιουργεί στο εξής Javascript:

var ViewModel = (function () {
    function ViewModel() {
        this.x = ko.observable(10);
        this.y = ko.observable(10);
    }
    return ViewModel;
})();
$(function () {
    ko.applyBindings(new ViewModel());
});
Δημοσιεύθηκε 02/10/2012 στις 12:52
πηγή χρήστη
Σε άλλες γλώσσες...                            


6 απαντήσεις

ψήφοι
105

Κοιτάξτε DefinitelyTyped .

«Ορισμούς τύπου γραφομηχανή αποθήκη για δημοφιλείς βιβλιοθήκες JavaScript»

Απαντήθηκε 26/10/2012 στις 11:46
πηγή χρήστη

ψήφοι
57

Έκανα αυτό το μικρό interface για να πάρει στατική είδη για νοκ-άουτ:

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;
    };
}

Βάλτε το σε «Knockout.d.ts» και στη συνέχεια αναφορά από τα δικά σας αρχεία. Όπως μπορείτε να δείτε, θα ωφεληθεί σε μεγάλο βαθμό από τα γενόσημα φάρμακα (τα οποία προέρχονται, σύμφωνα με τις προδιαγραφές).

Έκανα μόνο λίγες διεπαφές για ko.observable (), αλλά ko.computed () και ko.observableArray () μπορεί να προστεθεί εύκολα στο ίδιο μοτίβο. Ενημέρωση: Έχω καθόρισε τις υπογραφές για να εγγραφείτε () και προστέθηκε παραδείγματα υπολογίζεται () και observableArray ().

Για να χρησιμοποιήσετε από το δικό σας αρχείο, προσθέστε αυτό στην κορυφή:

/// <reference path="./Knockout.d.ts" />
declare var ko: Knockout;
Απαντήθηκε 02/10/2012 στις 15:23
πηγή χρήστη

ψήφοι
14

Δοκιμάστε πραγματοποίηση μου δηλώσεις γραφομηχανή διεπαφής (με απλό παράδειγμα)
https://github.com/sv01a/TypeScript-Knockoutjs

Απαντήθηκε 05/10/2012 στις 06:47
πηγή χρήστη

ψήφοι
6

Τίποτα δεν θα αλλάξει την άποψη του τρόπου συνδέσεις νοκ-άουτ δηλώνεται στη σήμανση, ωστόσο θα πάρει την καλοσύνη intellisense φορά οι διασυνδέσεις γραφτεί για τη βιβλιοθήκη νοκ-άουτ. Στο πλαίσιο αυτό θα μπορούσε να λειτουργήσει ακριβώς όπως το δείγμα jquery , η οποία έχει ένα αρχείο γραφομηχανή περιέχει διασυνδέσεις για το μεγαλύτερο μέρος της api jQuery .

Νομίζω ότι αν μπορείτε να απαλλαγείτε από τα δύο μεταβλητών δηλώσεις για ko και $ κωδικός σας θα λειτουργήσει. Αυτά κρύβονται τα πραγματικά ko και $ μεταβλητές που δημιουργήθηκαν κατά τη φόρτωση των νοκ-άουτ και jquery σενάρια.

Έπρεπε να το κάνετε αυτό στο λιμάνι του έργου οπτικό πρότυπο στούντιο για να νοκ-άουτ:

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>
Απαντήθηκε 02/10/2012 στις 15:02
πηγή χρήστη

ψήφοι
2

Είμαι με τη χρήση https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/ και έχει όλες τις διεπαφές για την νοκ-άουτ.

Απαντήθηκε 17/08/2015 στις 11:34
πηγή χρήστη

ψήφοι
0

Εντάξει έτσι απλά χρησιμοποιήστε την ακόλουθη εντολή για να εισαγάγετε τα είδη νοκ-άουτ ή TDS.

npm install @types/knockout

Αυτό θα δημιουργήσει έναν κατάλογο @types στον κατάλογο των έργων σας node_modules και το αρχείο ορισμού τύπου δείκτη νοκ-άουτ θα είναι σε έναν κατάλογο που ονομάζεται νοκ-άουτ. Στη συνέχεια, μέσα από μια αναφορά τριπλό κάθετο στο αρχείο ειδών. Αυτό θα δώσει μεγάλη IDE και χαρακτηριστικά γραφομηχανή.

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

Τέλος, απλά χρησιμοποιήστε μια δήλωση δηλώνουν για να φέρει τη μεταβλητή ko στο πεδίο. Αυτό είναι έντονα-δακτυλογραφημένο έτσι γεια intellisense.

declare var ko: KnockoutStatic;

Έτσι, τώρα μπορείτε να χρησιμοποιήσετε KO ακριβώς όπως στα αρχεία σας javascript.

εισάγετε περιγραφή της εικόνας εδώ

Η ελπίδα αυτό βοηθά.

Απαντήθηκε 04/10/2017 στις 22:35
πηγή χρήστη

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more