2012-03-19 13 views
5

Ho giocato in giro con knockout.js con jQuery, e sono molto di nuovo da knockout.jselemento Recupero con jQuery all'interno evento ad eliminazione diretta

Il mio esempio di codice e il codice è qui: http://jsfiddle.net/Ninjanoel/ADYN6/

Fondamentalmente, sto provando a creare uno schermo di input di numeri della lotteria come test delle mie conoscenze e sto provando a convalidare l'input di una casella di testo e quindi applicare effetti speciali alla casella di input se [onBlur], il testo la scatola non è valida

Ho una "LotteryApp", con un array osservabile di "Lines", con una serie normale di [5] ko osservabili da utilizzare come input o "Number Boxes". Sto usando un modello per visualizzare ogni 'Linea' e un ulteriore modello all'interno di quello per il rendering delle 'Scatole'.

Quello che mi piacerebbe è chiamare un plugin "color fade" jquery [rosso a colore bg] nella casella di testo se l'input non è corretto. Ma nella funzione 'onBlur' ho creato, non posso trovare qualsiasi cosa in qualsiasi degli argomenti passati alla funzione di aiutarmi chiamare qualcosa come myTextBox = jQuery(arguments.something), in modo che io possa fare qualcosa di simile jQuery(myTextBox).colourFade()

<input type="text" data-bind="value:n, event:{blur: $parent.onBlur }, uniqueName:true, disable: $parent.isLD" class="lotteryNumber" maxlength="2"/> 

è il codice nel mio modello più interno che gestisce il onBlur.

self.onBlur = function()... 

è la funzione che desidero chiamare sull'evento "sfocatura".

Sono consapevole del fatto che se utilizzo un binding personalizzato, ad es. ko.bindingHandlers.myBinding quindi l''elemento' viene passato direttamente alle chiamate 'update' e 'init', che posso quindi usare per chiamare jQuery (elemento) .colourFade(), ma questo è più di un esercizio per capire come accedere all'elemento utilizzando i binding di eventi standard, perché posso immaginare che ne avrò bisogno spesso e non desidero fare TUTTO in un binding personalizzato, e anche con le opzioni 'init' e 'update' all'interno di un binding personalizzato (per quanto ne so) , Non penso che saranno sufficienti (ad es. Su "keyup"?), E comunque i binding personalizzati sembrano basati su un ko.observable piuttosto che su un evento stesso.

Sommario:

quando si utilizza data-bind="event : {blur : myMethod}", come faccio, all'interno di myModel.myMethod, afferrare l'elemento HTML che ha creato l'evento.

risposta

8

Il event oggetto jQuery è il secondo argomento nel gestore di eventi, in modo da:

self.onBlur = function(data, event) { 
    console.log(event.target); 
} 
+0

dolce, grazie dude! "Alert (jQuery (event.target) .VAL());" restituisce il valore della casella di testo, proprio come ne avevo bisogno anche io! Sono sicuro di aver provato event.target in precedenza, oh, va bene, grazie per la risposta concisa! – Nnoel

+0

note event.target non funziona in IE. devi usare event.srcElement per IE .. Quindi, dovresti usare qualcosa come questo per gestire tutti i browser: var target = event.target || event.srcElement – portlandrock

+0

@portlandrock: ho modificato il mio post per segnalare che si sta utilizzando l'oggetto evento jQuery, non quello direttamente dal browser. Se jQuery è nella pagina, knockout utilizzerà i gestori di eventi jQuery, che normalizza la proprietà [event.target] (http://api.jquery.com/event.target/) in modo che tu possa utilizzarla in qualsiasi browser che jQuery sostiene. – Douglas

Problemi correlati