KnockoutJS साथ टाइपप्रति

Question

KnockoutJS साथ टाइपप्रति

वोट

132

वहाँ KnockoutJS साथ टाइपप्रति का उपयोग कर के किसी भी नमूने है? मैं कैसे वे एक साथ काम करते हैं करने के लिए के रूप में बस उत्सुक हूँ?

संपादित करें

यहाँ है कि मैं क्या है, काम करने के लिए लगता है

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

}

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

यह निम्न जावास्क्रिप्ट में उत्पन्न करता है:

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

02/10/2012 को 12:52
का स्रोत उपयोगकर्ता CallumVass

अन्य भाषाओं में...

6 जवाब

वोट

57

मैं नॉकआउट के लिए स्थिर प्रकार प्राप्त करने के लिए इस छोटे इंटरफ़ेस बनाया:

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
का स्रोत उपयोगकर्ता Sten L

वोट

14

टाइपप्रति इंटरफ़ेस घोषणाओं के मेरे लिए यह महसूस (सरल उदाहरण के साथ) की कोशिश करो
https://github.com/sv01a/TypeScript-Knockoutjs

05/10/2012 को 06:47
का स्रोत उपयोगकर्ता Sv01a

वोट

6

कुछ भी नहीं है जिस तरह से नॉकआउट बाइंडिंग मार्कअप घोषित किये गए हैं लेकिन हम IntelliSense अच्छाई मिलेगा एक बार इंटरफेस नॉकआउट पुस्तकालय के लिए लिखा जाता है के मामले में बदल जाएगा। इस संबंध में यह सिर्फ तरह काम करेंगे jQuery नमूना है, जो एक है टाइपप्रति jQuery एपीआई के अधिकांश के लिए इंटरफेस युक्त फ़ाइल ।

मुझे लगता है कि अगर आप को और $ अपने कोड काम करेंगे के लिए दो चर घोषणाओं से छुटकारा पाने के। ये वास्तविक 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
का स्रोत उपयोगकर्ता Jeremy Danyow

वोट

2

मैं उपयोग कर रहा हूँ https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/ और यह नॉकआउट के लिए सभी इंटरफ़ेस है।

17/08/2015 को 11:34
का स्रोत उपयोगकर्ता JavaScript Linq

वोट

0

ठीक है तो बस नॉकआउट प्रकार या टीडीएस आयात करने के लिए निम्न आदेश का उपयोग।

npm install @types/knockout

यह अपनी परियोजनाओं node_modules निर्देशिका में @types निर्देशिका और सूचकांक नॉकआउट टाइप परिभाषा फ़ाइल बनाने के एक नामी निर्देशिका के नॉकआउट में होगा। इसके बाद, फ़ाइल प्रकारों के लिए एक ट्रिपल स्लेश संदर्भ के माध्यम से। यह महान आईडीई और टाइपप्रति सुविधाओं दे देंगे।

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

अंत में, बस दायरे में ko चर लाने के लिए एक घोषणा बयान का उपयोग करें। यह दृढ़ता से टाइप किया जाता है ताकि हैलो IntelliSense।

declare var ko: KnockoutStatic;

तो अब आप सिर्फ अपने जावास्क्रिप्ट फ़ाइलों में तरह KO उपयोग कर सकते हैं।

उम्मीद है की यह मदद करेगा।

04/10/2017 को 22:35
का स्रोत उपयोगकर्ता SimperT

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

वोट

105

पप्रश्न के लेखक ने इस जवाब को सबसे अच्छा माना।

को देखो DefinitelyTyped ।

"टाइपप्रति प्रकार परिभाषाएं लोकप्रिय जावास्क्रिप्ट पुस्तकालयों के लिए भंडार"

26/10/2012 को 11:46
का स्रोत उपयोगकर्ता George Mavritsakis