knockout.js - Hur definierar jag en knockout-bindningshanterare i TypeScript?

Jag lägger normalt till anpassade knockout binding handlers i JavaScript via

ko.bindingHandlers.myBindingHandler = {...}

men nu måste jag lägga till dem i TypeScript via

ko.bindingHandlers["myBindingHandler"] = {...}

annars får jag detta fel eftersom jag använder typescript.d.ts:

Egenskapen 'myBindingHandler' finns inte på värde av typen 'KnockoutBindingHandlers'

Jag gillar inte ["property"]-metoden eftersom jag då inte kan referera till den eller få intellisense på den senare.

Så, hur kan jag lägga till min egna binding-handler till knockout när jag använder definitelyTyped:s knockout-definition, samtidigt som jag också kan referera till min definition via intellisense, etc?

Svar #1

Definiera en anpassad bindningshandlare

Det är faktiskt ganska enkelt, lägg bara till det (myBindingHandler) i KnockoutBindingHandlers-gränssnittet precis innan du definierar din egen binding handler. Observera att du måste göra detta tillägg till gränssnittet, i en .d.ts-fil från och med version 1.0 (eller möjligen tidigare).

bindingHandlers.d.ts

/// <reference path="typings/knockout/knockout.d.ts" />

interface KnockoutBindingHandlers {
    myBindingHandler: KnockoutBindingHandler;
}

myBindingHandler.ts

/// <reference path="bindingHandler.d.ts" />

ko.bindingHandlers.myBindingHandler = {...}

Nu fungerar allt. Detta kommer inte att skriva över några befintliga definitioner eller deklarationer, så din definition kommer att ligga tillsammans med ko.bindingHandlers.text, etc.

Var bara försiktig, för om du inte inkluderar en faktisk definition av myBindingHandler och refererar till den någon annanstans, kommer det att kompileras på grund av definitionen du lade till i KnockoutBindingHandlers, men det kommer att krascha vid körning eftersom det inte finns någon implementering av myBindingHandler.

Dokumentationen för att lägga till egna bindinghandlers i knockoutjs finns här

Använda fn för att lägga till anpassade funktioner med TypeScript

På samma sätt, för att lägga till något till ko.observable.fn, skulle du göra detta i TypeScript

interface KnockoutObservableFunctions  { 
    myFnExtension(args: any): returnType; 
}

och kalla det med

// x will be defined as a returnType automatically, but you could specify it if you like, either way
var x: returnType = ko.observable("value").myFnExtension(args);

Observera: Det finns olika gränssnitt för typerna subscribable, observable, observableArray och computed:

  • ko.subscribable.fn ... lägg till i KnockoutSubscribableFunctions
  • ko.observable.fn ... lägg till i KnockoutObservableFunctions
  • ko.observableArray.fn ... lägg till i KnockoutObservableArrayFunctions
  • ko.computed.fn ... lägga till i KnockoutComputedFunctions

Dokumentationen för att lägga till på fn i knockoutjs finns här

Svar #2

du kan helt enkelt ignorera det, men detta är inte en bra praxis, genom att casta till any definierar du inte typen av egenskapen myBindingHandler

(<any>ko.bindingHandlers).myBindingHandler = { ... };

Relaterade artiklar