OOUI/OOjs primer/nl

De OOUI bibliotheek is gebaseerd op het event model van OOjs . Als u niet bekend bent met OOjs, wilt u misschien even de tijd nemen om vertrouwd te raken met de EventEmitter, omdat het een handige en krachtige hulpmiddel is dat vaak in voorbeelden zal worden gebruikt.

Met EventEmitter kunnen eventhandlers worden verbonden met een object, worden aangeroepen wanneer bepaalde gebeurtenissen plaatsvinden en worden losgekoppeld wanneer ze niet langer nodig zijn. Events zijn gebonden aan een context. Wanneer een schakelknop bijvoorbeeld van status verandert, is de gebeurtenis niet simpelweg 'change', maar 'change' en de waarde van de status van de schakelknop ('on' of 'off').

De meest eenvoudige manier om een handler te verbinden en los te koppelen, is met de EventEmitter methoden on() en off(). In het volgende voorbeeld wordt de on()-methode gebruikt om een onChange-handler te verbinden met een schakelknop, die ook in het voorbeeld is gedefinieerd.

// In het volgende voorbeeld wordt de methode on() gebruikt om een handler te verbinden met een schakelknopwidget.
// De methode off() wordt later gebruikt om de verbinding met de handler te verbreken.

// Een nieuwe schakelknop maken
var button = new OO.ui.ToggleButtonWidget( { 
  label: 'I handle events' 
} );
// Stel de handler in. 
// In dit voorbeeld is het een functie die het knoplabel verandert in 'All done!' wanneer de status van de knop wordt gewijzigd.
// De methode off() wordt vervolgens gebruikt om de verbinding van de handler met de schakelknoppen te verbreken zodat de functie dan niet meer wordt aangeroepen.
button.onChange = function () {
  button.setLabel( 'All done!' );
  button.off( 'change', button.onChange );
} 
// Gebruik de methode on() van de ButtonWidget om een handler te verbinden ('button.onChange', hierboven gedefinieerd) met de knop voor het opgegeven type gebeurtenis ('change'). 
button.on( 'change', button.onChange );
// Voeg de knop toe aan de DOM.
$( 'body' ).append( button.$element );

Vaak worden de methoden connect() en disconnect() gebruikt om meerdere handlers met objecten te verbinden en los te koppelen. Een voorbeeld daarvanː

// Hier ziet u de methodes connect() en disconnect().
// De functie 'onChange' past het label van de schakelknop 'try me!' aan om overeen te komen met de status van de knop ('on' of 'off'), dit wordt uitgevoerd wanneer de status van de schakelknop verandert.
// De functie 'onToggleClick', die 'Click!' schrijft elke keer als er op de knop wordt geklikt, is ook verbonden met de knop via de methode connect().
// De methode disconnect(), verbonden met de knop 'Disconnect EventHandlers', wordt gebruikt om beide handlers van de knop te verwijderen.

// Knoppen maken en ze toevoegen aan een knoppengroep.
var toggle = new OO.ui.ToggleButtonWidget( {
  label: 'try me!'
} );

var button = new OO.ui.ButtonWidget( {
  label: 'Disconnect EventHandlers'
} );

var buttonGroup = new OO.ui.ButtonGroupWidget( {
  items: [ toggle, button ]
} );

// Definieer de functies waarmee verbinding moet worden gemaakt (in dit voorbeeld toggle.onChange, toggle.onToggleClick en button.onClick)

toggle.onChange = function () {
  if ( toggle.getValue() === false ) {
    toggle.setLabel( 'off' );
  } else {
    toggle.setLabel( 'on' );
  }
};

toggle.onToggleClick = function () {
  $( 'body' ).append( '<p>Click!</p>' );
};

button.onClick = function () {
  toggle.disconnect( toggle, {
    change: 'onChange',
    click: 'onToggleClick'
  } );
};

// Bind de functies aan de widgets voor de opgegeven gebeurtenissen.

toggle.connect( toggle, {
  change: 'onChange',
  click: 'onToggleClick'
} );

button.connect( button, {
  click: 'onClick'
} );

// Voeg de knoppengroep toe aan de DOM.
$( 'body' ).append( buttonGroup.$element );

Een conventie van OOjs is dat elke methode die begint met "on" (bijvoorbeeld onClick() en onKeyPress()) privé is, behalve de on()-methode zelf.

Meer details over EventEmitterː OOjs/Events.