Domanda Dichiarare un knockout calcolato osservabile in dattiloscritto


Sono nuovo di dattiloscritto e vorrei combinarlo con la bontà di knockout. Ho un osservabile calcolato, che funziona attualmente, ma voglio sapere se questo è il modo giusto su di esso o c'è un modo migliore.

Sto usando il file di definizione knockout da nu-get. In esso ci sono 4 definizioni KnockoutComputed (x).

  1. KnockoutComputed
  2. KnockoutComputedDefine
  3. KnockoutComputedFunctions
  4. KnockoutComputedStatic

Mi piace il {} metodo di dichiarare osservabili e vorrei mantenere questo. Quindi, per farla breve, questo è il metodo corretto per dichiarare gli osservabili o esiste un modo alternativo (magari con intlisense nella funzione)

Sto usando il primo in questo modo:

class PersonViewModel {
    public firstname: KnockoutObservable<string>;
    public lastname: KnockoutObservable<string>;
    public fullname: KnockoutComputed<string>;
    constructor() {
        this.firstname = ko.observable('');
        this.lastname = ko.observable('');
        this.fullname = ko.computed({
            owner: this,
            read: function () {
                return this.firstname() + " " + this.lastname();
            }
        });
    }
}

con lo snippet html di:

<h2>Type Script and Knockout.</h2>
<input data-bind="value: firstname" />
<input data-bind="value: lastname" />
<div data-bind="text: fullname"></div>

16
2018-05-22 05:17


origine


risposte:


La raccomandazione è usare le funzioni di freccia per calcolare. Ti darà anche l'intelletto desiderato:

this.fullname = ko.computed({
        owner: this,
        read:  () => {
            return this.firstname() + " " + this.lastname();
        }
    });

Fondamentalmente che cattura this usando la chiusura quindi non importa chi richiama la funzione. this continuerà a significare PersonViewModel invece di any . Di Più : http://basarat.github.io/TypeScriptDeepDive/#/this

Prova l'intellisense in Campo di gioco di TypeScript. Dovresti acquisire intelligenza quando premi this.


35
2018-05-22 05:29