Zum Inhalt

jQuery

Die Funktionen und Objekte in diesem Paket dienen dem Zusammenspiel mit jQuery. Ein einfaches Plugin besteht aus einer Funktion die ein Ojekt vom Type Alvine.jQuery.Plugin zurück gibt.

namespace = 'my.namespace'

function LoremIpsum(options) {
    return new Plugin(options);
}

function Plugin(options) {
    Alvine.Types.testIsCalledAsConstructor.call(this, 'Plugin', namespace);
}

Plugin.prototype = new Alvine.jQuery.Plugin();

Um dieses Plugin dem DOM-Element mit der ID my zuzuordnen,

<div id="my"></div>

muss die Alvine-Methode von jQuery aufgerufen werden.

$('#my').asignAlvineComponent(myPlugin,{key:'value'})

Auf die Settings des Elements kann dann über die getSetting-Funktion zugegriffen werden.

$('#my').get(0).Alvine.myPlugin.getSetting('key')
// -> value
$('#my').get(0).Alvine.myPlugin.getSetting('label')
// -> my plugin
$('#my').get(0).Alvine.myPlugin.getSetting('undefined')
// -> undefined

Statt im letzten Fall, wenn ein Wert nicht definiert wurde, auf undefined zu prüfen, kann mann beim Aufruf der Funktion gleich einen Default-Wert übergeben. Dieser Default-Wert wird im Fall das es den gewünschten Schlüssel nicht gib zurückgegeben.

Der letzte Aufruf würde mit Default-Parameter den Wert nicht vorhanden zurück geben.

$('#my').get(0).Alvine.myPlugin.getSetting('undefined','nicht vorhanden')
// -> nicht vorhanden

Eine weitere Möglichkeit Werte zu definieren besteht in dem notieren von data- Attributen direkt im Element. In unserem Beispiel könnten wir direkt im HTML-Tag das Attribut data-myplugin-label definieren und den gewünschten Wert angeben.

<div id="my" data-myplugin-label="new label"></div>

Ein Aufruf der Settings würde in diesem Fall new label zurück geben.

$('#my').get(0).Alvine.myPlugin.getSetting('label');
// -> new label

Die Reihenfolge der Auswertung ist dabei immer gleich. Zuerst wird geprüft, ob im Tag ein Wert definiert ist. Ist kein Wert vorhanden, wurde auch hier kein Wert gesetzt, so wird zum Schluß der Wert aus den Plugin Defaults herangezogen.

Plugin

Plugin-Struktur innerhalb einer Komponente.

Reference

Eine Referenz speichert neben einem jQuery-Objekt auch einen Prefix.

asignAlvineComponent()

Die jQuery-Methode jQuery.fn.asignAlvineComponent() weisst einem jQuery-Objekt ein Alvine-Datenobjekt zu, damit dieses über das DOM-Element referenziert werden kann. Details siehe oben.

Kommentare