Controller in EmberJS is unable to access model data passed from route

Could someone lend me a hand with this concern?

I currently have EmberJS 3.4 version and in my route, the code looks like:

export default Route.extend({
    model(){
        const items = [{price: 10}, {price: 15}]
        return items
     },
});

However, in the controller, the model returns undefined:

export default Controller.extend({

    init(){
        console.log(this.model); //returns undefined
        console.log(this); //has the model object as a property
    },
  })

Refer to this image for the output:

Even though this.model returns undefined, when accessing it within a computed property, why isn't it still undefined?

export default Controller.extend({

subtotal: computed('this.model', function(){
         return  this.model.reduce((acc, item) => {
             return acc + item.price
         },0) // return 25
        }),
     })

Answer №1

It's important to note that controllers are singletons, which means you can't access the model in the init method.

Curiously, why does the model not appear undefined when accessed within a computed property?

In Ember, accessing the model property within computed properties (or modern getters) is essential for maintaining reactive data synchronization. This ensures that all your data stays in sync, especially since in Ember 3.4, computed callbacks are only invoked once their dependencies are resolved.

Here are some additional resources for further reading:

  • Details on controllers: (current docs as of version 4.3)
  • Information on computed properties: (documentation from version 3.4)

Occasionally, the return for this.model might show as undefined, despite the model object being listed when logging "this".

This discrepancy occurs because when an object is logged, it is not copied into the console; rather, a reference is displayed. Therefore, if there are any unresolved data at the time of viewing, they may appear as undefined until everything settles.

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

Does a .innerXML exist?

Is anyone knowledgeable in XML able to offer some assistance? I have a function that I use to parse XML data, and you can find the XML file I am working with here. function dialogXML(varName,url){ if (window.XMLHttpRequest){ r[varName]=new XML ...

The Node.js Express server seems to be having trouble accessing static files

After successfully starting the express server, I encountered an issue when trying to load static files which resulted in an error message reading "Cannot GET /URL". The static files are located within a folder named "Login" and both the app.js and "Logi ...

Adjust the field's color depending on the outcome displayed within

I'm trying to implement a feature where the field value changes to green when "OK" is selected and red when "NOK" is chosen. I have written the following JavaScript code but it's not working as expected - the colors change before clicking submit, ...

Change your favicon dynamically based on the user's online or offline status using Vue

I am currently working on setting up different icons to display when my browser is online (normal logo) and offline (greyed out logo). With Vue JS, I am able to detect the online and offline states, as well as set different favicons accordingly. However, t ...

What is the process of transforming XMLHttpRequest into JQuery-UI-Autocomplete?

Previously, I was utilizing manual XMLHttpRequest to connect with PHP files and the Database using the following code: if(window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, ...

How to switch around div elements using CSS

There are two unordered list items in a container div and one swap button. When the swap button is clicked, the order of items needs to change. This functionality can be achieved using the following swap function. var ints = [ "1", "2", "3", "4" ], ...

What is the best way to eliminate the background color from one span after selecting a different one?

I created a span element that changes its background color when clicked, but I want the background color to switch to the newly clicked span while removing it from the previously clicked one. Can someone help me achieve this? CSS list-sty ...

Show an HTML email message on a webpage without disrupting the existing page layout

Looking for a solution to display mail messages on a web page originating from an exchange server with various style elements that might interfere with the existing page layout. Attempting to load these mail messages within a div results in the style elem ...

I need help figuring out how to send a POST/GET request from AJAX to a custom module controller in Odoo 10, but I'm running into issues

I have implemented a custom module in Odoo 10 with a simple controller. Everything works smoothly when accessing http://127.0.0.1:8069/cmodule/cmodule through the browser, displaying the expected return string. However, I encountered an issue when attempt ...

Nested Promises in Angular's $q Library

I'm facing an issue with a function that should return a list of favorite locations. Here's the code snippet in question: When I call LocationsFactory.getFavoriteLocations(), it returns a promise like this: getFavoriteLocations: function() { ...

Changing HTML lists into JSON format

I am facing a slight issue with my HTML template while trying to convert it to JSON. My goal is to convert a list of HTML messages into JSON format. I appreciate your assistance in advance. HTML Template <div class="message"> <div class="mes ...

The start "NaN" is not valid for the timeline in vis.js

Whenever I attempt to make a call, an error message pops up saying Error: Invalid start "NaN". I've looked everywhere online for a solution with no success. Below are the timeline options: timeline: { stack: true, start: new Date(), end: ...

Display the React component following a redirect in a Next.js application that utilizes server-side rendering

Just starting out with next.js and encountering a problem that I can't seem to solve. I have some static links that are redirecting to search.tsx under the pages folder. Current behavior: When clicking on any of the links, it waits for the API respo ...

What steps do I need to take to make this JavaScript code function properly? How can I create a carbon copy email setup in

Recently, I've been struggling to implement this particular code on my website as I am not very proficient in JavaScript. Despite searching for various online resources, none of them seem to address my issue. This code is meant to be a part of a form ...

Is there a way to retrieve JSON data from a different domain and incorporate it into my own website?

I am attempting to utilize JSON data from "" and display the data on my website. My goal is to extract the JSON field name "Stats" and retrieve the sub-field name '\"v\"'. You can refer to the documentation provided by purpleair here: h ...

Encountering an Issue with Installing KeyStone.Js on Windows 7 64-bit Environment

I'm having issues installing keystone.js via Windows command prompt. The installation process throws errors like the following: npm ERR! [email protected] postinstall: `yodoctor` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the [email  ...

I need a counter in my React application that is triggered only once when the page scrolls to a specific element

I've encountered a challenge with a scroll-triggered counter on a specific part of the page. I'm seeking a solution using React or pure JavaScript, as opposed to jQuery. Although I initially implemented it with states and React hooks, I've ...

Tips for choosing and deselecting data using jQuery

Is there a way to toggle the selection of data in my code? Currently, when I click on the data it gets selected and a tick image appears. However, I want it so that when I click again on the same data, the tick will disappear. How can I achieve this func ...

Issues arise when attempting to alter the background image using jQuery without browserSync being activated

I am facing an issue with my slider that uses background-images and BrowserSync. The slider works fine when BrowserSync is running, but without it, the animations work properly but the .slide background image does not appear at all. Can someone help me ide ...

utilize jQuery and AngularJS to transform a JSON object into a nested JSON structure

Is there a way to convert my current JSON file into a nested JSON structure like the one below? I've attempted various methods (How to convert form input fields to nested JSON structure using jQuery), but I'm not achieving the desired outcome. Ca ...