Carattere tipografico contesto sbagliato questo

Question

Carattere tipografico contesto sbagliato questo

voti

7

Codice:

export class ViewModel {
        public users: knockout.koObservableArrayBase;

        constructor () {
            this.users = ko.observableArray([]);
            this.removeUser = this.removeUser.bind(this);//<-- Here compiller shows error
        }

        removeUser(user: User): void {
            this.users.remove(user);
        }
}

html:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Surname</th>
        </tr>
    </thead>
    <tbody data-bind=foreach: users>
        <tr>
            <td><a href=# data-bind=click: $root.removeUser>Remove</a></td>
            <td data-bind=text: name></td>
            <td data-bind=text: surname></td>
        </tr>
    </tbody>
</table>

Il problema è nel metodo removeuser. Per impostazione predefinita, se non mi lego contesto, questo == UserToDelete - oggetto non ViewModel. Se mi aggiungendo al costruttore: this.removeUser = this.removeUser.bind(this); (manually enforce context), quindi contesto è come bisogno di questo == ViewModel, ma poi si lamenta per dattiloscritto Impossibile convertire funzione su. (Utente: Utente) => vuoto richiede una chiamata di firme, ma la funzione manca uno

knockout.js typescript

È pubblicato 07/10/2012 alle 09:04
fonte dall'utente VikciaR

In altre lingue...

5 risposte

voti

2

Un'alternativa è quella di cambiare il legame di usare JavaScript click legano funzione per forzare il valore di thisessere il vostro modello di vista: data-bind="click: $root.MyFunc.bind($root)".

Si noti che $datae il click eventoggetto sarà ancora passato come argomenti per MyFuncda Knockout come descritto dal legame scatto specifica. Se è necessario sostituire gli argomenti di essere passati a MyFunc, semplicemente passare nella funzione bind dopo $rootin questo modo: .bind($root, param1, param2). Tecnicamente, questi argomenti verranno anteporre agli argomenti essendo fornita da Knockout, dando argomenti [param1, param2, data, event].

Risposto il 15/04/2014 a 21:00
fonte dall'utente Malgaur

voti

2

Beh, ho avuto lo stesso problema ecco perché mi è venuta con la seguente classe di base per risolvere il mio problema

export class ViewModelBase {
    private prefix: string = 'On';

    public Initialize() {
        for (var methodName in this) {
            var fn = this[methodName];
            var newMethodName = methodName.substr(this.prefix.length);
            if (typeof fn === 'function' && methodName.indexOf(this.prefix) == 0 && this[newMethodName] == undefined) {
                this[newMethodName] = $.proxy(fn, this);
            }
        }
    }
}

Quello che fa è ad anello tutti i membri della tua classe e se un metodo inizia con Su di esso verrà creato un nuovo metodo senza Su che chiamerà il metodo originale con il contesto giusto.

Non che $.proxysia una chiamata in modo jquery jquery è necessario per far funzionare tutto questo.

Risposto il 05/11/2012 a 22:30
fonte dall'utente Peter

voti

1

Bene, la soluzione più semplice e quello che faccio di solito con dattiloscritto e knockout js è che io non dichiaro funzioni chiamate dal ko sul prototipo ma al costruttore. Quindi, vorrei fare in questo modo:

export class ViewModel {
        public users: knockout.koObservableArrayBase;
        removeUser:(user: User) => void;

        constructor () {
            this.users = ko.observableArray([]);
            this.removeUser = (user:User) => {
                this.users.remove(user);
            }
        }
}

Risposto il 08/12/2012 a 19:59
fonte dall'utente George Mavritsakis

voti

0

Ho incontrato lo stesso problema. Per ottenere il giusto contesto è possibile utilizzare i parametri che vengono passati dal clickbinding. Il clickbinding passa 2 parametri, cioè l'utente e l'evento jquery del click.

Se si prende l'evento jQuery, e che utilizza la funzione ko.contextFor (), è possibile ottenere il giusto contesto.

La funzione dovrebbe essere simile a:

removeUser(user: User, clickEvent: any): void {
    var self = ko.contextFor(clickEvent.srcElement).$root;
    self.users.remove(user);
}

Risposto il 01/02/2013 a 04:28
fonte dall'utente Paul0515

nxn · Accepted Answer · 2012-10-07 18:33

Io non sono a conoscenza ko così forse c'è un modo migliore per risolvere il cambio di contesto, ma il vostro errore del compilatore dattiloscritto è causato da 'bind' Tipo di ritorno 'funzione', che è compatibile con il tipo di 'removeuser'. Si dovrebbe essere in grado di risolvere questo lanciando la funzione restituita nella firma tipo originale come segue:

this.removeUser = <(user: User) => void> this.removeUser.bind(this);