Comparing Ember Octane to the older versions of Ember in terms of the functionality provided by the `reopen()`

Question

Comparing Ember Octane to the older versions of Ember in terms of the functionality provided by the `reopen()`

Currently working on migrating the main app.js file to Ember 4 and native JavaScript. I'm curious about how others are approaching modifications to classes like the Route. Here is a snippet of my code:

Route.reopen({
  //breadCrumb: null
  currentRouteModel: function () {
    return this.modelFor(this.routeName);
  }
});

I could simply rewrite the method instances everywhere to directly return the desired result, but I'm interested in learning different approaches. Additionally, I have a reopening of the Component in app.js that needs attention during the migration process.

javascript ember.js

Answer 1

Answer №1

One common approach I have noticed people taking is to either:

Duplicate the code in multiple locations
Create a class decorator and apply it to the relevant classes

The implementation of a class decorator would resemble something like this (note that this example is specific to JavaScript, as TypeScript does not fully support "maybe"-inheritance with class decorators):

// Example of usage
@withCurrentRouteModel
export default class MyRoute extends Route {}

// Actual implementation
function withCurrentRouteModel(OriginalRoute) {
  return class extends OriginalRoute {
    @service router;

    get routeName() {
      return this.router.currentRouteName;
    }

    get currentRouteModel() {
      this.modelFor(this.routeName);
    }

  }
}

I incorporated the use of RouterService

to address my unfamiliarity with the concept of routeName

Answer 2

One common approach I have noticed people taking is to either:

Duplicate the code in multiple locations
Create a class decorator and apply it to the relevant classes

The implementation of a class decorator would resemble something like this (note that this example is specific to JavaScript, as TypeScript does not fully support "maybe"-inheritance with class decorators):

// Example of usage
@withCurrentRouteModel
export default class MyRoute extends Route {}

// Actual implementation
function withCurrentRouteModel(OriginalRoute) {
  return class extends OriginalRoute {
    @service router;

    get routeName() {
      return this.router.currentRouteName;
    }

    get currentRouteModel() {
      this.modelFor(this.routeName);
    }

  }
}

I incorporated the use of RouterService

to address my unfamiliarity with the concept of routeName

Comparing Ember Octane to the older versions of Ember in terms of the functionality provided by the `reopen()`

Answer №1

Similar questions

Transforming a function into its string representation | 'function(){...}'

Countdown timer that counts down in reverse when the browser is minimized

What is the method by which Morgan middleware consistently displays the output on the console following the execution of all other middleware

Is there a built-in function in Firefox that can retrieve a list of all indexedDB names stored in the

Understanding the Class Syntax in Node.js

Having trouble with Npx and npm commands not running in the VSCode terminal?

Having trouble with the JQuery class selector?

When the Ajax "GET" request is made to the intra-service, the CMS service worker will respond with an "OK" even when offline

Image not located: 404 error in JavaScript

Organize a collection of items in AngularJS

Create dynamic elements within bootstrap-vue using data from a JSON file

The React-FontAwesome icon is unable to display when a favicon has been set

Using Javascript/JQuery to apply pixel values in CSS styling

Using the useState hook in a loop can sometimes result in a unique key error

Instructions for implementing personalized horizontal and vertical scrolling within Angular 9

Is Angular Translate susceptible to race conditions when using static files for multi-language support?

What could be causing the repetition of the same cookie in my request header when using jQuery ajax?

Encountering a TypeError when utilizing a npm hashtable within an object definition

Guide: Building Angular/Bootstrap button checkboxes within a loop

Function modifies global variable