Dart JavaScript Interop Callbacks mit jQuery

Question

Wie kann ich den folgenden jQuery-Code in Dart übersetzen? Ich habe Schwierigkeiten, den Warnungsrückruf mit js.interop zur Arbeit zu bringen.

<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> 

Jede Hilfe wird geschätzt.

Answer 1

danke für Ihre Frage! Ich war mir selbst nicht sicher, aber es stellt sich heraus, dass dies möglich ist. :)

First off, fügen js zu Ihrem pubspec.yaml:

name: jquerydart 
description: A sample application 

dependencies: 
    js: any 

Dann laufen pub installieren, entweder über die Kommandozeile oder über Dart Editor.

Dann in Ihrer Dart-Datei:

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())); 
    }); 
} 

Beachten Sie, dass von JS in Dart Rückruf, benötigen Sie einen Rückruf-Objekt zu erstellen.

Beachten Sie auch, dass Sie $ nicht für die Variable jQuery verwenden können, da dart2js auch $ verwendet. In der Zwischenzeit müssen Sie jQuery in Ihrem Dart-Code verwenden.

Nach all dem ist es cool, dass wir jQuery über JS-Dart Interop verwenden können, aber Dart sollte das wirklich für uns tun. Also öffnete ich Fehler http://code.google.com/p/dart/issues/detail?id=6526

Answer 2

Zuerst fügen Sie die js Abhängigkeit zu Ihrem pubspec.yaml:

dependencies: 
    js: any 

Durch die Verwendung von js-Interop Sie fast den gleichen Code wie in schreiben 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"); 
     })); 
    })); 
    }); 
} 

Die wichtigsten Unterschiede sind:

• Sie haben js.Callback.once oder js.Callback.many benutzen, um Ihre Callback-Funktionen einzustellen. Verwenden Sie js.Callback.once, wenn Ihr Rückruf nur einmal aufgerufen wird.
• Ihr Code muss mit js.scoped verpackt werden. Im Grunde ist managing proxy lifetimes hier, um Speicherverlust zu verhindern.

Das heißt, können Sie den obigen Code vereinfachen:

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"); 
    })); 
    }); 
} 

Die Änderungen sind:

• js.context.$(new js.Callback.once(($) { ist nicht erforderlich, weil main auf die jQuery $(function) entspricht.
• js.context.alert wurde von window.alert ersetzen gewesen: es effizienter ist, sondern direkt kommunizieren mit JSDART Funktionen zu nutzen.