2013-04-16 11 views
10

ich nicht in der Lage binVerwendung jquery innen GWT JSNI

$("#"+profileId).offset().top 

aus meiner gwt JSNI Funktion zu verwenden. Ich versuchte dies

$wnd.$("#"+profileId).offset().top 

aber das funktioniert auch nicht. Ich fühle, dass ich hier Syntax vermisse. Könnte jemand helfen

+0

Was ist der gesamte Code Ihrer jsni-Methode (Rückgabetyp, Parameter usw.)? laden Sie jquery.js in Ihre index.html? Erhalten Sie einen Fehler, wenn Ihr Code ausgeführt wird? –

Antwort

12

Drei Lösungen für diese Frage:

1- Ihr JSNI Code sieht in Ordnung, außer, dass Sie es in der entsprechenden einzuschließen native Funktion und gibt ein Double (oder einen anderen Zahlentyp zurück, wenn gwt das Casting durchführen soll).

native double getTop(String profileId) /*-{ 
    return $wnd.$("#" + profileId).offset().top; 
}-*/; 

Wenn Sie wollten Fehler sehen, durch Ihre UncaughExceptionHandler Sie Ihren Code in einem $entry Block

native double getTop(String profileId) /*-{ 
    return $entry(function(data) { 
    return $wnd.$("#" + profileId).offset().top; 
    }); 
}-*/; 

2- Aber statt mit jQuery wickeln sollte, ermutige ich Sie gwt-query aka gQuery zu verwenden. Du musst jQuery also nicht in deine .html laden und musst dich nicht mit jsni in deiner App beschäftigen.

Mit gQquery haben Sie fast die gleiche jQuery-Syntax, aber in Java, so dass Sie Typ sicher, Refactoring, Testen .... Aber auch, werden Sie Dutzende von Dienstprogrammen (einfachste Ajax, Versprechen, Selektoren, etc.) haben sind nicht im gwt-Kern.

gQuery ist eine leichtgewichtige Bibliothek, die in gwt komplett neu geschrieben wurde. Es ist KEIN Wrapper der jQuery-Bibliothek (wie in der anderen Antwort falsch gesagt), Sie müssen jquery.js nicht in Ihre Seiten aufnehmen.

Wie bei jeder anderen gwt-Bibliothek würde der gwt-Compiler alles entfernen, was Sie nicht von gquery verwenden. In Ihrem Ansatz muss Ihre App alle jquery-Sachen laden.

Also in Ihrem Fall, und mit diesem Code in Ihren .java Klassen gquery schreiben:

import static com.google.gwt.query.client.GQuery.*; 
... onModuleLoad() { 
    int top = $("#"+profileId).offset().top; 
} 

3- Schließlich haben Sie die Möglichkeit, reinen GWT-Code mit dem Offset eines Elements zu erhalten, wenn Sie kennen seine ID:

int top = DOM.getElementById(profileId).getOffsetTop(); 
+0

Warum ist es "Double" in JSNI-Methode und "Int" in GQUERY und GWT ??? –

+0

Option 3 funktioniert .. Vielen Dank ... – javalearner

+0

JS hat nur einen Typ für Zahlen, also ist der natürliche Weg, eine Zahl von einem jsni zurückzugeben, Double, sonst muss sich gwt mit Casting beschäftigen (natürlich kann man das Ändere die Methodensignatur und gebe ein int zurück und lasse gwt das Casting ausführen). Gquery gibt ein int zurück, weil es das ist, was 'goOffsetTop()' in GWT zurückgibt, und wir delegieren darauf, um die Elemente zu berechnen. Top –

0

Ich nehme an, dass Sie die jquery Bibliothek in Ihrer Host-Seite hinzugefügt.

Die korrekte Syntax ist

private native int myJquery() /*-{ 
    $wnd.$(function() {   //may be you forgot this line 
    return $wnd.$("#"+profileId).offset().top; 
    }); 
}-*/; 

und unter der Voraussetzung Sie nur mit Jquery in GWT gestartet.

Ich schlage stark ein geringes Gewicht Dritten Bibliothek

GWTQuery

+0

Danke für die Info. Ich versuche, den Wert von der jsni-Funktion wie folgt zurückzugeben. aber ich bin nicht in der Lage es zu bekommen. 'Code'public statisch nativen int getIFrameTop (String Profileid)/* -... { \t \t $ wnd $ (function() { \t \t return $ wnd $ ("#" + Profileid) .Offset() oben \t \t}); \t} - * /; 'code' – javalearner

+0

aktualisieren Sie die Frage mit Ihrem vollständigen Code und sind Sie sicher, dass Ihre Kontrolle in JNSI kommen ?? Überprüfen Sie mit der eine Warnung in der ersten Zeile setzen –

+0

@Baddshah Fehler: GWTQuery ist nicht ein wrapper von jquery, gwtquery ist eine komplett in gwt geschriebene bibliothek. Sie haben es mit der gwt-jquery verlinkt, die ein Wrapper sein sollte, da sie ihren Code nicht veröffentlichen (es sei denn, Sie dekomprimieren das Glas manuell) –

1

Ein einfacher Weg ist mit einem bescheidenen eval.

public static native void eval(String toEval)/*-{ 
    return $wnd.eval(toEval);  
}-*/; 

Dann benutzen Sie einfach Ihr Skript

eval("$('#'" + profileId + ").offset().top"); 

Und da ist in Ihrem GWT-Code genannt Sie es Ihren Code als sicherer man berücksichtigen kann.

+0

Ein Nachteil dieses Ansatzes ist, dass Sie keine IDE-Analyse innerhalb des Inhalts der Zeichenfolge erhalten, die Sie an eval senden. Auf diese Weise, wenn Sie irgendwo einen Tippfehler haben oder eine undefinierte Eigenschaft aufrufen, werden Sie erst zur Laufzeit wissen. – Ronald

+0

Sie richtig, ist mit Vorsicht zu verwenden. –