Referenz auf Variablen in Javascript

[Crackp0t]

Hi, ich bin gerade dabei mich mit der Konstruktion von jQuery Plugins zu beschäftigen und bin da auf ein javascript-speziefisches Problem gestoßen:

Angenommen ich habe ein globales Objekt was so aussieht:

var globals = {
 status: {
  network: {
   "ipAddress" : "192.168.1.10"
  }
 }
}

Den Wert von "ipAddress" möchte ich nun in einem selbstgeschriebenen Plugin verwenden:

Aufruf des Plugins:

$("#ip-address").changeValue({
  value: globals.status.network.ipAddress,
});

Beispielcode des Plugins:

(function ( $ ) {
 $.fn.changeValue = function ( options ) {
  var defaults = {
   value: "0.0.0.0",
  };
  var o = $extend({}, defaults, options);
  // do something with the value
  function doSomething(){
 }
  function changeValue(){
 /*
  * insert solution here
  */
  }
 }
})(jQuery);

In changeValue() will ich den Wert von globals.status.network.ipAddress ändern, fragt sich nur: Wie bekomme ich eine Referenz zu dieser Variable? Ich möchte sie ja nicht hart kodieren, da ich das Plugin für unterschiedliche Werte benutzen will.

Mein Ansatz bis jetzt war, die Variable als ganzen String zu übergeben und dann mit eval("o.value") im Pluginkontext den Wert auszulesen. Jedoch wird das unübersichtlich, wenn es sich bei dem Wert um einen Array handelt und ich iterieren muss oder so. Für mich sieht die eval() Methode auch nicht wirklich sauber aus.

Habt ihr eine andere Idee, wie ich an die Referenz, als auch den den Wert ohne eval() komme?


MFG

 

[saila]

AW: Referenz auf Variablen in Javascript

Hi,

schreibe in deinem Plugin:

var funktionsname = function(param) {

}

dann kannst du mittels Konstruktor folgendes durchführen:

$('#selector').plugin(param);

Innerhalb deines Plugin kannst du dann mittels dem übergebenen Parameter die entsprechende Methode aufrufen.

Param steht für Options bzw. Settings.

 

[Crackp0t]

AW: Referenz auf Variablen in Javascript

Das habe ich nicht richtig verstanden.
Welche Funktion soll ich so notieren? Im Falle des Beispiels changeValue()?
Was soll ich dann als Parameter übergeben? Wenn ich das o Objekt nehme, dann bin ich ja immernnoch in den privaten Variablen...
Bitte beschreibe die Hintergründe etwas genauer.

 

[saila]

AW: Referenz auf Variablen in Javascript

Hi,

ich habe mir noch mal den Eingangspost durchgelsen. Bevor ich nun weiter in die Tiefe gehe folgende Verständnisfrage/n:

Du willst die IP des Users und wenn sich diese ändert, soll was passieren?
Für was wird die IP erforderlich verwendet (in der weiteren Scriptberücksichtigung)?

Dein Plugin hat den für mich bisherigen Fehler, dass du die Erweiterung mit Options an einen Selector hängst. Als Option zählt schon direkt die IP welche du aber direkt im Plugin notieren/ermitteln kannst. Somit wäre die Option als IP gar nicht als Option notwendig. An dieser Stelle habe ich ein Verständisproblem zu deinem Plugin.

 

[Crackp0t]

AW: Referenz auf Variablen in Javascript

Also ich versuch es mal anders zu beschreiben:

Ich bastel an einem Webinterface für eine Streaminglösung. Über dieses werden alle Einstellungen für das Device vorgenommen, ähnlich wie bei nem Router.

Nun muss der Benutzer also eine Menge einstellen, was für mich sehr viele Forms, Validierungen. Ajax requests usw. bedeutet. Um das Einstellen etwas interaktiver zu machen, habe ich mich dazu entschieden, ein Overlay - Marke jQuery UI - mit der Form und beschreibenen Text einzusetzen. Da ich aber nicht für jeden Change-Button 100 Zeilen Code schreiben will, bastelte ich mir ein Plugin, welches ungefär wie folgt aufgerufen wird:

    $("#encryption").live("click", function(){
        $("#overlay-edit").overlay({
            html: "Select encryption type:",
            fieldType: "dropdown",
            cgiUrl: "cgi-bin/set-wlan.sh",
            options: {
                value: "wlan.encryptionType",
                active: "network.wlan.activeEncryption",
                formName: "encryptionType"
                
            }
        });
    });

Diese Daten integriere ich dann in ein HTML-Template und parametrisiere die Ajax Funktion.
Das Objekt options enthält dabei die Auswahlmöglichkeiten für das Dropdown-Menü und die aktive Einstellung, welche in dem Menü dann bereits selektiert ist. Wie man sieht, sind dies jedoch nur Verweise auf Objekteigenschaften. Dies hat den Hintergrund, dass alle nötigen Daten, welche im Interface angezeigt und geändert werden sollen, schon beim 1. Aufruf heruntergeladen- und in ein globales Objekt integriert werden.

Wenn der Benutzer aber nun im Overlay-Dialog die Einstellung editiert, muss ich diese auch im globalen Objekt ändern, da sonst bis zum erneuten komplett-reload der Page die falschen Werte sichtbar sind. Und genau dort liegt mein Problem. Wie kann ich sowohl den Ort bzw. Name, als auf den Wert dieser Eigenschaft effektiv übergeben?

Hoffe es ist nun besser nachvollziehbar

 

[saila]

AW: Referenz auf Variablen in Javascript

Hi,

also wenn ich das bislang korrekt verstanden habe, möchtest du einen change-event erweitern um die von dir genannten Möglichkeiten innerhalb von "overlay". Ist das korrekt? Für die Erweiterung möchtest du die Optionen übergeben, welche in deinem Beispiel unter der Methode overlay genannt sind?

 

[Crackp0t]

AW: Referenz auf Variablen in Javascript

Auf Änderungen reagier ich nicht direkt, der Benutzer muss erst einen Submit-Button drücken, um sie zu übernehmen. Wenn dieser gedrückt wurde, wird als erstes die Validierung durchgeführt. Wenn diese Korrekt ist, werden die Daten serialisiert und per Ajax verschickt. Bei erfolgreichem Verschicken soll dann die relevante globale Variable geändert und der Dialog geschlossen werden.

Also zusammengefasst:

onklick Edit-Button -> Dialog erzeugen -> übergebene Daten darstellen -> auf Interaktion vom Nutzer warten -> Daten speichern oder verwerfen.

 

[saila]

AW: Referenz auf Variablen in Javascript

Hi,

das ganze ist per jQuery doch um ein wesentliches einfacher per $.ajax.

Der Aufbau:
Jede entsprechende Param-Layer/Seite hat ein input-type hidden, in welchem der jeweilige Seitenparameter gesetzt wird. Bsp:

<input type="hidden" name="page" value="1" />

Das ganze ist ja ohnehin in einem Form-Tag eingebunden und der Submit nimmst du raus und lässt das ganze über einen Button type="button" laufen. Dieser Button ist dein Selector.

Bei Klick auf den Button machst du wie zuvor die Form-Validierung und danach den $.ajax. Da du per input-hidden mitgeteilt bekommst, woher die Daten stammen, ist somit die Verarbeitung und Rückgabe um ein vielfaches einfacher und weist somit, wie dud den callback (data) verarbeiten kannst.

Wenn du nun die Logik gut im Form aufbaust, brauchst du letztlich als callback ein json-Object mit den entsprechenden Daten.

Der callback n lässt du per each oder for() durchlaufen und die Felder werden entsprechend gefüllt.

Wenn die Logik sehr gut aufgebaut ist, kannst du im callback den Feldnamen (input-name) und den Value als json per php zurückgeben und somit hast du direkt auch deine Frage geklärt.

Das ganze ist letztlich eine sehr gute Denksportaufgabe, wie du im Grunde in allen Form-Feldern namanskonform vorzugehen hast.