Skip to main content

Події

Навігація

Події

Більшість компонентів Techno4, які побудовані з класами/конструкторами (включаючи сам клас Techno4) мають API стоворення подій. Це дозволяє нам легко створювати та обробляти всі види подій, включаючи події між компонентами. 
var app = new Techno4({
  ...
  on: {
    // each object key means same name event handler
    pageInit: function (page) {
      // do something on page init
    },
    popupOpen: function (popup) {
      // do something on popup open
    },
  },
});

var popup = app.popup.create({
  ...
  on: {
    open: function (popup) {
      // do something on popup open
    }
  }
})

Обробники подій в параметрах

Коли ви створюєте приклад додатків або будь-який інший компонент за допомогою API, ви можете передавати обробник подій на ініціалізацію додатків/компонентів у параметрі:
var app = new Techno4({
  ...
  on: {
    // each object key means same name event handler
    pageInit: function (page) {
      // do something on page init
    },
    popupOpen: function (popup) {
      // do something on popup open
    },
  },
});

var popup = app.popup.create({
  ...
  on: {
    open: function (popup) {
      // do something on popup open
    }
  }
})

Методи подій

Також можна додати/видалити обробники подій, використовуючи наступні зразки методів:
Властивість Опис
Data4
Назва маршруту, напр. HOME
Data4
Назва маршруту, напр. HOME
 
<rz-seller-title>
    <p class="product-seller__title">
        <span class="product-seller__title_header">Продавець:</span>
        <rz-marketplace-link class="ng-star-inserted">
            <a apprzroute="" href="https://rozetka.com.ua/ua/seller/neo/" class="ng-star-inserted">
                <strong class="ng-star-inserted">Neo</strong>
                <!---->
                <!---->
            </a>
            <!---->
            <!---->
            <!---->
        </rz-marketplace-link>
        <!---->
        <!---->
    </p>
</rz-seller-title>
[instance].on(event, handler)
Додати обробник подій
[instance].once(event, handler)
Додати обробник подій, який буде знятий після його завершення
[instance].off(event, handler)
Видалити обробник подій для зазначеної події
[instance].off(event)
Видалити усі обробники для зазначеної події
[instance].emit(event, ...args)
Запустити подію на примірнику

Додати обробники подій 

var app = new Techno4({/*...*/});

var popup = app.popup.create({/*...*/});

app.on('pageInit', function (page) {
  // do something on page init
});

app.on('popupClose', function (popup) {
  // do something on popup close
});

popup.on('open', function (popup) {
  // do something on popup open
});

// Once handler, will work only once
popup.once('close', function (popup) {
  // do something on popup close
});

Додати кілька обробників подій

Ми можемо додати кілька подій у перших параметрах, розділених пробілом:
app.on('popupOpen popupClose', function (popup) {
  // do something on popupOpen and popupClose
});

Видалення обробників подій

Зазначені вище обробник функції може бути видалений:
function onTabShow() {
  // do something on tab show
}

// add handler
app.on('tabShow', onTabShow);

// later remove tabShow handler:
app.off('tabShow', onTabShow);

Видалення усіх обробників подій

Якщо ми не передаємо аргумент другого обробника до методу .off, тоді ми видалимо всіх обробників, призначених для цієї події:
// Remove all tabShow handlers
app.off('tabShow');

Створення події

І звичайно, ми можемо створити будь-які власні події, які нам можуть знадобитися:
app.on('myCustomEvent', function (a, b) {
  console.log(a); // -> 'foo'
  console.log(b); // -> 'bar'
});

app.emit('myCustomEvent', 'foo', 'bar');

Делегування подій

Події, що накладаються на компоненти, також делегуються на екземпляр APP:
app.on('something', function () {/*...*/});

popup.on('something', function () {/*...*/});

popup.emit('something'); // will trigger "something" event assigned to both app and popup instances
Якщо це не те, що ви хочете, можна створювати так звані місцеві події на компонентах. У цьому випадку нам потрібно ставити префікси назви події з Local ::
app.on('something', function () {/*...*/});

popup.on('something', function () {/*...*/});

popup.emit('local::something'); // will only trigger "something" event assigned to popup instance above

Контекст обробника подій

Контекст обробника подій ('this') завжди буде вказувати на екземпляр, де його було призначено:
app.on('popupOpen', function () {
  console.log(this); // -> app instance
});
popup.on('popupOpen', function () {
  console.log(this); // -> popup instance
});

Шина подій

API створювача поточних подій на класах Techno4 також дуже корисна для створення спеціальних подій для обміну данними між компонентами додатків та модулями. І є додатковий клас помічників, який призначений для використання лише як шина, а не для затоплення основного додатка чи деяких компонентів. Для створення нової шини подій нам потрібно викликати new Techno4.Events(): 
// Create custom events bus
var myEvents = new Techno4.Events();

// handle event
myEvents.on('some-event', function () {
  // do something when 'some-event' fired
})

// emit event
myEvents.emit('some-event');

// Create another event bus
const notificationEvents = new Techno4.Events();

notificationEvents.on('notificationReceived', function (notification) {
  // do something with notification
})

// somewhere in the app send notification
notificationEvents.emit('notificationReceived', {
  title: 'New message',
  from: 'John Doe',
});

Techno4 Framework