Dom7 Basics

Dom7 Basics

Dom7 Selection, Chaining and Events

Dom7 163 (github.com/nolimits4web/dom7 (https://github.com/nolimits4web/dom7 163 ), MIT, 4.0.6) copies jQuery 561 's syntax: $(selector) returns a collection, most methods act on every element and return the collection so calls chain, and .on() takes an optional selector for delegated events. It is app.$ in the console, $ in a component's context, and import $ from 'dom7' in a module. With the Catalog tab loaded:

Dom7 in the DevTools console, with the catalog loadedJavaScript

const $ = app.$; // the same Dom7 that Framework7 uses internally
const $cards = $('#view-catalog .book-card');
console.log($cards.length, Array.isArray($cards), $cards.eq(0).find('.book-title').text());
$cards
  .filter((el) => el.querySelector('.badge.color-red'))
  .addClass('sold-out')
  .css('opacity', 0.5);
console.log('sold out:', $('.sold-out .book-title').text(), $('.sold-out').length);
$('#view-catalog').on('peek', '.book-card', function (e, source) {
  console.log(`peek at ${this.getAttribute('href')} from ${source}`);
});
$cards.eq(2).find('.book-title').trigger('peek', 'the console');
console.log($cards.map((el) => el.querySelector('.book-author').textContent).join(', '));

Output

6 true The Quiet Harbor
sold out: Salt and Saffron 1
peek at /books/3/ from the console
Mara Ellison, Tomas Reyes, Priya Nair, Jonas Berg, Elena Sokolova, Aiko Tanaka

The collection is a real array, so map and join work on it. The event fired on a title bubbled to the view, where the delegated handler ran with this set to the card and the trigger() argument after the event. Unlike jQuery, filter() passes (element, index); like it, .text() reads only the first element.

MENU