Callback di interoperabilità di dart JavaScript con jQuery

Question

Come posso convertire il seguente codice jquery in Dart? Sto avendo difficoltà a far funzionare la richiamata di avviso usando js.interop.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script> 
    $(function() { 
    $('p').hide('slow', function() { 
     alert("The paragraph is now hidden"); 
    }); 
    }); 
</script> 

Qualsiasi aiuto è apprezzato.

Answer 1

grazie per la tua domanda! Non ero sicuro di me stesso, ma risulta che questo è possibile. :)

Prima di tutto, aggiungi js al vostro pubspec.yaml:

name: jquerydart 
description: A sample application 

dependencies: 
    js: any 

Poi, gestito pub installare, sia tramite la riga di comando o tramite Dart Editor.

Poi, nel file Dart:

import 'dart:html'; 
import 'package:js/js.dart' as js; 

hideIsDone() { 
    window.alert('all done!'); 
} 

void main() { 
    js.scoped(() { 
    js.context.jQuery('p').hide(1000, new js.Callback.once(() => hideIsDone())); 
    }); 
} 

Si noti che a richiamata da JS in Dart, è necessario creare un oggetto di richiamata.

Inoltre, non è possibile utilizzare $ per la variabile jQuery, poiché dart2js utilizza anche $. Quindi nel frattempo devi usare jQuery nel tuo codice Dart.

Detto questo, è bello poter usare jQuery tramite l'interoperabilità JS-Dart, ma Dart dovrebbe davvero fare questo per noi. Così ho aperto bug http://code.google.com/p/dart/issues/detail?id=6526

Answer 2

aggiungere prima il js dipendenza alla vostra pubspec.yaml:

dependencies: 
    js: any 

Utilizzando js-Interop è possibile scrivere quasi lo stesso codice in javascript .

import 'dart:html'; 
import 'package:js/js.dart' as js; 

void main() { 
    js.scoped(() { 
    js.context.$(new js.Callback.once(($) { 
     $('p').hide('slow', new js.Callback.once(() { 
     js.context.alert("The paragraph is now hidden"); 
     })); 
    })); 
    }); 
} 

Le differenze principali sono:

• Devi usare js.Callback.once o js.Callback.many per impostare le funzioni di callback. Utilizzare js.Callback.once se la richiamata è chiamata una sola volta.
• Il codice deve essere incluso nello js.scoped. Fondamentalmente, managing proxy lifetimes è qui per evitare perdite di memoria.

Detto questo, è possibile semplificare il codice di cui sopra:

import 'dart:html'; 
import 'package:js/js.dart' as js; 

void main() { 
    js.scoped(() { 
    js.context.$('p').hide('slow', new js.Callback.once(() { 
     window.alert("The paragraph is now hidden"); 
    })); 
    }); 
} 

I cambiamenti sono:

• js.context.$(new js.Callback.once(($) { non è necessaria perché main è equivalente al jQuery $(function).
• js.context.alert è stato sostituito da window.alert: è più efficiente utilizzare direttamente DART funzioni invece di comunicare con JS.