Efficient method for asynchronously loading unrelated models in a nested route using Ember

Here is a simplified version of my routes:

/
  /sites
    /:site_id
      /settings
        /user-defined-params
          /:param_id  

I need to display a table-list of parameters assigned to a specific site in the /user-defined-params route. However, the models for sites and params are not related, so I can't fetch them via a simple relation.

Should the model() hook for my router return a list of these params? By default, the model seems to be the site loaded from the parent route (:site_id). What if loading the data takes time and I want to display the table first with a loading indicator until the data fills in?

When I try to load the data in the model() hook, the transition blocks. If I try in the afterModel() hook, I struggle to make it available for the template without manually assigning the params property to the site model, which doesn't feel right.

I have searched online for examples but haven't found one that addresses this scenario. Any tips on how to load the data without blocking the transition would be greatly appreciated.

Answer №1

Ember's current router default behavior is to block UI loading until the data promised in model hooks have resolved. However, there is an interest in changing this to allow for non-blocking UI patterns with the built-in router.

The consensus within the community right now is to utilize ember-concurrency and its state (specifically the .isRunning aspect of tasks) to switch between a loading state and displaying the rendered data on screen. Interestingly, ember-concurrency was developed by the individual responsible for the original router as well as the ongoing re-thinking of the current router implementation.

An example showcasing one approach to achieve non-blocking UI can be found here:

Personally, I prefer using routes for initial task loading and then handling the data in the template. For more complex UI scenarios, I may also opt for container components as described in the linked article.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The logs of both the frontend and backend display an array of numbers, but surprisingly, this data is not stored in the database

I am attempting to recreate the Backup Codes feature of Google by generating four random 8-digit numbers. for(let i = 0; i < 4; i++) { let backendCode = Math.floor(Math.random() * (99999999 - 10000000 + 1) + 10000000); backendCodes.push(back ...

It appears that jQuery is unable to identify a different string when making an Ajax call with a status code of 403

I've encountered a curious situation that has left me wondering if the error lies with me or jQuery. I'm seeking some advice on this matter. Currently, I am making an Ajax call that returns a 403 status code. However, the accompanying message fo ...

Send a vanilla JavaScript ajaxForm submission by completing the form

I am currently in the process of integrating JavaScript from an iOS application into a web application. I have control over the code for both apps. My objective is to develop a JavaScript function that can receive input from a barcode scanner, populate a w ...

I'm encountering an issue with ESlint in my Vue.js project that I just can't seem to resolve

A couple of months back, I encountered this issue within my vue.js project. The error seems to be originating from lines 22, 23, and 24, which correspond to lines 45, 46, and 47 in the code block below. { "resource": "/C:/Users/Demo User ...

Creating markers for every value in a table using Google Maps API v3

Looking for some guidance here. I have a table with multiple values that I need to process using a function. Could someone help me with a suitable loop in jQuery or JavaScript that can achieve this? I'm still learning the ropes of these languages. My ...

What is the best way to organize two different menu types - one based on ID and the other in a more traditional format - in order to create

I am working on a website at where the menu is id based to scroll on the page for menus, except for the publication and forum pages. How can I ensure smooth sorting of the menu when moving from the publication section to education or other sections, sim ...

Trouble with displaying Google line chart on Django platform

I am currently working on a project involving the visualization of COVID data. The idea is that when a user selects a specific state, date range, and output type, the corresponding graph should be displayed using Google API to showcase line charts. However ...

Tips for determining the minimum value within an array of objects across multiple keys using a single function

I am currently tasked with the challenge of determining the minimum value from an array of objects that contain multiple keys. My ultimate goal is to identify the minimum value among all keys or specific keys within the objects. For instance var users = ...

What is the best way to pause the function execution until the ajax call is finished?

I have the following code snippet: function validate(){ if (document.getElementById('<%=txtSeqNo.ClientId %>').value.trim() == "") { alert('Please enter Sequence number.'); return false; } var result = checkduplicateseq( ...

Strategies for handling asynchronous requests and effectively presenting the retrieved data

On my HTML page, I have a badge component that shows the number of unread messages. Here is the HTML code: <button class="font" mat-menu-item routerLink="/message"> <mat-icon>notifications</mat-icon> <span [matBadgeHidden]="newM ...

Invoke a React Component's function from another function

I am working with a React Component. export function initiateAlert(msg) { notify() // How can I call a function from a normal function within a React.Component } export class Alert extends React.Component { notify = () => { alert("a") } ...

Tips for properly structuring a HTTP response for a getJSON() jQuery request

Let's discuss the server setup for my thesis project: I am working on a unique custom server implementation. On the client side, I need to send requests for database queries that the server will handle. The server will then respond with the query res ...

Beyond the Realm of Three.js Skybox

Currently, I am developing a 3D game in JavaScript using three.js. Everything is going smoothly so far, however, one issue has arisen regarding the skybox not showing up when my camera's near and far distances are set too small. The problem stems fro ...

TypeScript error: Cannot assign type 'Element' to variable of type HTMLInputElement

I find myself faced with an issue while working on a project that involves TypeScript and React. Specifically, I am working on a dialog window component where I need to store the trigger element, like a button, as a property. My goal is to return focus to ...

Can somebody please tell me the equivalent of the sleep() function in JavaScript?

Are there more efficient ways to implement a sleep function in JavaScript compared to the pausecomp function as shown below (sourced from here)? function pausecomp(millis) { var date = new Date(); var curDate = null; do { curDate = new Date(); ...

How can XML data be effectively showcased on a website?

I have a service that generates XML files every 10 seconds with server information. I am seeking a solution to showcase this data on a webpage. After researching online, it appears that utilizing AJAX would be beneficial as it permits the loading of dynam ...

Troubleshooting React's failure to start with node.js running behind an Nginx Reverse Proxy

This is my first attempt at setting up a Node.js server in production (other than one Meteor server), and I've run into a problem that I can't figure out on my own. I have built an application using React. Here is the server code: // Imports va ...

What is the purpose of the Google variable if it has not been declared before?

While experimenting with the Google Maps API for Javascript, I stumbled upon the Hello World section. <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, l ...

Stop the Bootstrap 5 accordion from expanding when the spacebar is pressed in the header text input

Within my React app using react-bootstrap, I have implemented an accordion component that expands or collapses based on the user's interaction with a text input located in the AccordianHeader component. Interestingly, whenever the spacebar is released ...

Having trouble with JavaScript concat function not behaving as it should? Can you provide more details to

I am trying to extract all the cities from an object that contains country names as keys and arrays of cities as values. However, my approach seems to be failing and I can't figure out why. var cities = { "United Kingdom": ['london'], ...