unshiftObject method is not working in ember

I have the array of Objects and want to concat only the list property of all objects and create a new array. So I have a "combinedList" getter in the below code to combine the list if array length is greater than 1 else just return the 1st items list property. This returned array will be used in the template file to display. If any new item is added, the addComment function will be called with the newly added item and push that to the "combinedList" array.

The problem here is, if the objArr length is less than 1, the newItem is pushed to the "combineList". But, if it is greater than 1, newItem is not pushed to the "combinedList" array.

Can anyone please help me to figure out the cause for this issue?

export default class YourComponent extends Component {
  objArr = [ {id:1, list:[1,2,3]}, {id:2, list:[3,4]} ];

  get combinedList() {
    if (this.objArr.length > 1) {
      let list = [];
      this.objArr.forEach((item) => {
        list.push(...item.list);
      });
      return list;
    }
    return this.objArr[0].list;
  }

  // Call this method when adding a new item
  addComment(newItem) {
    this.combinedList.unshiftObject(newItem);
  }
}

Ember 4.x (Octane) - replacement for Observers?

I am nearly done upgrading a very old Ember.js project from 2.13 all the way up to the latest LTS release, 4.12. Along the way I've been coming to grips with the changes that the Octane release brought about, and one area I'm struggling to adapt is our use of observers.

We use observers in two files to fire function calls when an observed value changes. I understand that Observers are discouraged in Octane, so if possible I'd like to migrate away from them.

My understanding is that tracked properties are the end-all be-all now; they're largely meant to replace computed properties, and I assume other state-based functions like observers, but I'm not really sure how to apply them in this use case, or if it's even possible.

My question is: Is there a preferred replacement for Observers in Ember Octane (4.x+)?

Ember JS Reserved Attribute/model names

TLDR: will naming a model/relationship "type-info" work?

I'm trying to use an included relationship in ember that's named "type" in my backend. I realize that's probably a reserved keyword in ember so I named it type-info in my ember app. I can see the model in the store inspector but I can't access it as a property of other models.

This is the relationship if that helps at all:

  @belongsTo('type-info', { async: false })
    declare typeInfo: TypeInfoModel;

I tried renaming the model to "denomination-type" which didn't work and then just "denomination" which worked. Am I missing something here or should I just find a different name? I would rename it to avoid whatever issue is going on but I think "type should be in the name in some way.

ember js - service usage to show data

I am new to ember js and trying to write my first app...

I have :

service app/service/event_handler.js

import Service from '@ember/service';

export default class EventHandlerService extends Service {

    eventList = [
        {
            EventName: 'test event 1',
            EventDesc: 'test event 1 desc',
            StartDate: '16.11.2023',
            EndDate: '05.02.2024',
            EventType_ID: 1,
        },
        {
            EventName: 'test event 2',
            EventDesc: 'test event 2 desc',
            StartDate: '17.11.2023',
            EndDate: '15.02.2024',
            EventType_ID: 2,
        },
        {
            EventName: 'test event 3',
            EventDesc: 'test event 3 desc',
            StartDate: '13.10.2023',
            EndDate: '01.01.2024',
            EventType_ID: 1,
        }
    ];
}

controller app/controllers/event-controller.js

import Controller from '@ember/controller';
import { getOwner } from '@ember/application';
import { service } from '@ember/service';
export default class EventControllerController extends Controller {
    // @service eventHandler;

    get events() {
        console.log("loading events");
        return getOwner(this).lookup('service:event-handler')
    }
}

and my hbs file that has a code block

<table>
                <thead>
                    <tr>
                        <th>Event name</th>
                        <th>Event Date Start</th>
                        <th>Event Date End</th>
                    </tr>
                </thead>
                <tbody>

                    
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    
                </tbody>
            </table>

the table is empty and i dont know what am i doing wrong :c I tried looking some tutorials and asking ai but I am still having issues...

How to transfer an object to an component in ember.js

Ember.js is completely new to me. (Current version 5.4)
I would like to build a small WebUI. The login and the menu navigation work great. But I have problems with the loop and visualizing information from the single loop in the component.

I have a "main-axis" component. I make an each loop in this template. Now I want to install a component in each loop and enter various information from the object in the template of this component. Titles, values etc.

main-axis.hbs

<div class="row">
 
    <div class="col-12 col-lg-6">
      <LinearAxis />
    </div>
 
</div>

main-axis.js

import Component from "@glimmer/component";

export default class MainAxis extends Component {
  exampleArray = [
        {title: 'foo', id:7},
        {title: 'bar', id:42}
    ];
}

example template "linear-axis.hbs"

<div class="card">
  <div class="card-header">
    Axis 
  </div>
  <div class="card-body">
    <p class="card-text">Number: </p>
    <button type="button" class="btn btn-primary btn-sm">Click</button>
  </div>
</div>

the empty js class inside app/components "linear-axis.js

import Component from '@glimmer/component';

export default class LinearAxis extends Component {
// how i get informations from the loop and provide them into the individual template instance
}

I have spent a lot of time with the documentation of Ember.js and am not really getting any further.

Hot to scroll to window-top on route load in Emberjs 5.4

In Ember 5.4, when a new route is loaded, and the last view was scrolled, the scroll position remains. I want it to scroll to top of the window instantly if the url/route changed.

I made it work with this code in app/routes/application.js:

import Route from '@ember/routing/route';
import { action } from '@ember/object';

export default class ApplicationRoute extends Route {
    @action
    didTransition() {
        setTimeout (() => window.scrollTo ({top: 0, left: 0, behavior: 'instant'}), 1);
    }
}

But using setTimeout with 1 millisecond seems bad style and maybe error-prone to me. Nevertheless just using window.scrollTo ({top: 0, left: 0, behavior: 'instant'}) without timeout does not work, it does not scroll the window to the top.

So I think I maybe am using the wrong event(/action), but I cant find a better one in the docs (e.g. here: https://api.emberjs.com/ember/5.4/classes/Route).

This problem is already addressed in some other stackoverflow-questions (e.g. here: Emberjs scroll to top when changing view) but for older versions of ember or an other style of defining the route - where, to be honest, I'm not sure what exactly in applicable, because I am new to ember and was not able to find my way through the jungle of versions and deprecations docs and different styles in different versions to get an answer to this question.

Why does ember data store share tokens between 2 webb apps iny domain?

0

I have 2 differents applications in ember.js both connect to the same api: "host1:3000/appA" and "host2:3001/appB". I use nginx so that the client can access appA and appB through a single domain, that is: "mydomain.com/appA" and "mydomain.com/appB". Everything is correct but the applications are sharing "store" ember objects. So if I login into appA, I also login into appB. How can I prevent session sharing between applications?.

I used this code from nginx, but does't work:

location /appA {
  proxy_pass http://host1:3000;
  proxy_cookie_path /appA /appA;
}

location /appB {
  proxy_pass http://host2:3001;
  proxy_cookie_path /appB /appB;
}

Uncaught Error: Could not find module `@ember/application` imported from `web-app/app`

What might be the reason for this error?

Please can anyone help? This is how my app-boot.js looks

      if (!runningTests) {
        require("web-app/app")["default"].create({"name":"web-app","version":"0.0.0+9380b4bc"});
      }
    

I have been upgrading my ember version. My whole app is stuck

ember-component-css in production env on ember 5.3.0 have no styleNamespace

When I am using ember-component-css in development env - everything works fine, I got class prefix in each style when i am using .

Example:

<div class=''> // <div class='hjsdf6_class-name-from-component'>
</div>

But when I am using my app with production env i got:

<div class='hjsdf6_ '>
</div>

In component.js:

import podNames from 'ember-component-css/pod-names'

  get styleNamespace() {
    return podNames['class-name-from-component']
  }

So, may be it is not a bug. May be it is a feature?...