Can a universal attach() handler be implemented for all viewmodels worldwide?

Question

Can a universal attach() handler be implemented for all viewmodels worldwide?

In my Aurelia use case, I am looking to implement a handler that will run for every attached view. Specifically, I need an HTML5 polyfill for date and number inputs using querySelector. While I could manually call this in each view, I am curious if there is a recommended way to set this globally. (Please note that setting it at the router pipeline step may not be suitable for views loaded via compose.)

I understand the potential risks involved, but I am interested in knowing if there is a best practice for adding global attached() and detached() handlers for both views and viewmodels.

Upon further examination (https://github.com/aurelia/templating/blob/ee5b9d6742fddf3d163aee8face6e6a58ba1554c/src/view.js#L259), it seems possible to add a hook for a global handler at this location that accepts a view as an argument. However, ideally I would prefer not to modify the framework code if there is another solution.

javascript aurelia

Answer 1

Answer №1

One approach I suggest is the creation of a foundational viewmodel class with an attached logic that includes essential global functionalities. Subsequent viewmodels can invoke super.attached() to implement these global operations.

A demonstration is available here:

This strategy can be adapted for use with compose too. Although not entirely automated, it offers an opt-in solution requiring additional effort from all viewmodels.

Base Class - utilized by all viewmodels

import { inject } from 'aurelia-framework';

@inject(Element)
export class BaseView {

  constructor(element) {
    this.element = element;
  }

  attached() {
    // implement global logic here
  }

}

Sample Viewmodel - practical implementation

import { BaseView } from './base-view';
import { inject } from 'aurelia-framework';

@inject(Element)
export class ExtendedView extends BaseView {

  constructor(element) {
    super(element);
  }

  attached() {
    super.attached(); // execute global logic
  }

}

Answer 2

One approach I suggest is the creation of a foundational viewmodel class with an attached logic that includes essential global functionalities. Subsequent viewmodels can invoke super.attached() to implement these global operations.

A demonstration is available here:

This strategy can be adapted for use with compose too. Although not entirely automated, it offers an opt-in solution requiring additional effort from all viewmodels.

Base Class - utilized by all viewmodels

import { inject } from 'aurelia-framework';

@inject(Element)
export class BaseView {

  constructor(element) {
    this.element = element;
  }

  attached() {
    // implement global logic here
  }

}

Sample Viewmodel - practical implementation

import { BaseView } from './base-view';
import { inject } from 'aurelia-framework';

@inject(Element)
export class ExtendedView extends BaseView {

  constructor(element) {
    super(element);
  }

  attached() {
    super.attached(); // execute global logic
  }

}

Can a universal attach() handler be implemented for all viewmodels worldwide?

Answer №1

Similar questions

Are there any missing (or "optional") expressions in handlebars.js?

Having trouble running the THREE.js geometry, text, and shapes example on my personal computer

Angular sorting - Strings with undefined values are placed at the end

A demonstration of VueJS Nested Builder functionality

Can styles be added using script code?

The tooltip popup does not appear within the nz-tabs

Develop a dynamic button using JavaScript to fetch information from an array

What is the simplest method in MongoDB to retrieve an array containing only one specific field from the documents?

Create a JavaScript function to save data

Removing an active image from a bootstrap carousel: A step-by-step guide

"Learn an effective method for presenting JSON variable data in a Bootstrap modal with a clean design using three distinct columns

What separates a typical update from using the $set operator for updating?

Navigating the challenges presented by CORS (Cross-Origin Resource Sharing) and CORB (Cross-Origin Read Blocking) when utilizing the FETCH API in Vanilla Javascript

From Google Assistant to Python Results

Assigning a particular position within a Redux state array

The function for the Protractor promise is not defined

Unlocking the secrets of extracting dimensions from imported SVG components in nextJS

In React Native, the conversion from ReadableNativeMap to Double does not allow for direct casting of value for value

ES6: utilizing properties and methods of a subclass that inherit from the superclass

Vue event emissions are not triggered or detected