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 
// naar een widget met schakelknoppen. De off()-methode wordt later gebruikt om de verbinding te verbreken
// de eventhandler.

// 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 
// de status van de knop verandert. De off()-methode wordt vervolgens gebruikt om 
// de handler los te koppelen van de wisselknop zodat de 
// functie wordt niet meer aangeroepen.
button.onChange = function () {
  button.setLabel( 'All done!' );
  button.off( 'change', button.onChange );
} 
// Gebruik de on()-methode van de ButtonWidget om een handler te verbinden 
// ('button.onChange', hierboven gedefinieerd) naar de knop voor de 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 aan
// met het label 'try me!' om overeen te komen met de status van de knop ('on' of 'off') wordt
// uitgevoerd wanneer de status van de schakelknop verandert. De 'onToggleClick'
// functie, die 'Click!' schrijft telkens wanneer op de schakelknop wordt geklikt, is
// Ook verbonden met de schakelknop via de methode connect(). De
// disconnect() methode, verbonden met de knop 'Disconnect EventHandlers',
// wordt gebruikt om beide handlers van de wisselknop 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 (toggle.onChange, toggle.onToggleClick en
// button.onClick, in dit voorbeeld)

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.