How generate static page from route with dynamic segment with prember?

Does prember generates page with only static routes?

I try to pass the route name in prember config, but I get an error:

pre-render professions/profession/aviacionnyy-mehanik-tehnik-po-priboram-i-elektrooborudovaniyu-10007 307 //localhost:7784/

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?...

how to get the previous routename in ember 2.16 to used in back button

i have a analytic route in ember this can be accessed from two routes (example user page and profile page) the below code is used to redirect to the analytic route

The problem is that i have a back button in the analytic page i want to send the user to the page from where the call is originated (i.e) if the user got to the analytic page from user page the back button should go to user page and if the user got to analytic page from profile page the back button should lead to profile page.

i dont want to mess the current code so i will be glad if the solution is in the form of action which returns the string of previous page. so that i could just call the action in place where i could give the dest page name.

Ember-cli not using global version

This might actually more npm/node than just an EmberJS question.

Simply speaking I ran npm install -g ember-cli. However, when I check the version using ember --version, it shows me

ember-cli: 3.10.1
node: 18.18.2
os: darwin x64

That is definitely not the version I installed, because if i do npm ls -g --depth=0 to check my global packages, I get:

├── corepack@0.19.0
├── ember-cli@5.3.0
└── npm@10.2.0

To sanity check, i ran npm uninstall -g ember-cli and running npm ls -g --depth=0 again got

├── corepack@0.19.0
└── npm@10.2.0

So now, confirming that the global package is removed, I ran ember --version expecting the system to say ember is not installed, but instead i still get:

ember-cli: 3.10.1
node: 18.18.2
os: darwin x64

This leads me to believe there is some other installation of Ember on this computer and it's being used instead of the global version and I'd really like to just remove it - how do I find and remove it?

Useful context may be: I use NVM and Brew, although even in the past I didn't attempt to install ember with anything but the official installation direction of npm install -g ember-cli.

How to create Ember Service that fetches data from Apollo GraphQL Server

I successfully fetched data from Apollo GraphQL Server in Amber route using ember-apollo-client. I tried the same approach to have a service fetching data but I'm getting Uncaught TypeError: this.apollo.query is not a function from app/services/nav-categories.js.

Minimal Working Example

Start a new app using

$ ember new super-rentals --lang en
$ ember generate service nav-categories

Configure Apollo end point in config/environment.js:

module.exports = function (environment) {
  const ENV = {
    ...

    apollo: {
      apiURL: 'http://localhost:4000',
    }
  };

app/gql/queries/allCategories.graphql:

query AllCategories {
  categories {
    name
  }
}

app/services/nav-categories.js:

import Service from '@ember/service';
import { queryManager } from "ember-apollo-client";
import allCategories from "super-rentals/gql/queries/allCategories.graphql";

export default class NavCategoriesService extends Service {
  constructor() {
    super();
    this.apollo = queryManager();
    this.categories = this.apollo.query({ query: allCategories });
  }
}

app/components/my-header.js:

import Component from '@glimmer/component';
import { service } from '@ember/service';

export default class CartContentsComponent extends Component {
  // Will load the service defined in: app/services/nav-categories.js
  @service navCategories;
}

app/components/my-header.hbs:

<ul>

  <li></li>

</ul>

app/templates/application.hbs:

<MyHeader></MyHeader>

Unable to close module dropdown of parent application on clicking anywhere in child application UI screen rendered in Ifaram

I am facing problem to close module dropdown on clicking anywhere in child application UI screen.
I am not be able to handle click Outside functionality for dropdown elements defined in Parent application after clicking on the IFrame which loads child application inside Parent application as I have an application built using Ember JS. Inside that I have another application plugin using IFrame created using React JS. I wanted to hide the rendered dropdown from the parent application by clicking inside the IFrame where the child application is presented.
Can anyone provide a solution to achieve it?

Is there a way to call an Ember Octane component method with parameters and have it return the text without implementing a helper?

On Ember Octane versions, how would I call a method in the component.js so that it simply returns the string value into the hbs template (without creating a helper)?

For example, I want for each item in the list, pass the index value as a parameter into the randomColorClass() method in order to generate a random number between 0 and index value. I understand I could implement a new helper for it, but is there a way to simply do it direct in the component.js?

The reason I'm hesitant to use a helper is because helpers are "global" naturally and this color class is unique to and defined in this component only.

Component.js

randomColorClass(max) {
  const rand = Math.random() * max;
  return `color-${Math.floor(rand)}`;
}

Template.hbs

  <div class=>
    Hi, my name is 
  </div>

Ember application runtime error uncaught referenceerror ember is not defined vendor.js

I'm trying to upgrade the ember from 3.* to 4.12.2. I'm not getting any compilation issues but when I run my application I'm getting "uncaught referenceerror ember is not defined" inside the vendor.js file.

Any help appreciated, Thank you in advance.

Regards

I tried removing deprecated libraries, tried using auto import still getting this same issue

Accessing Ember.js services from browser extension in versions ≥4.0

In Ember 4.0 and up, access to the Ember global object is deprecated. We have a browser plugin for internal debugging/support purposes that would gather some variables from an ember service using this global object and generate a text report that first-line support personel could use when investigating an issue.

Below is a part of the report generator script for Ember 3.28. This will normally be injected by the extension using chrome.scripting.executeScript with world 'MAIN', but pasting in the console will have the same effect for reproduction purposes. In Ember 4.0 and up, this will throw a TypeError since window.Ember is undefined.

var namespace = window.Ember.Namespace.NAMESPACES.find(ns => ns.name === 'acmecorp');
var sessionService = namespace.__container__.lookup('service:session');
var applicationAdapter = namespace.__container__.lookup('adapter:application');
var user = sessionService.get('user');
var userId = sessionService.get('user.id');
var userType = sessionService.get('user.type');
var userTypePath = applicationAdapter.pathForType(userType ?? 'user');

Following our upgrade to Ember 4.0 and up, is there any way to access this information from a browser extension?

Ember 5.1 with ember-cli-stencil and third party components not working

I'm stuck. Perhaps someone is able to point me in the right direction to solve my problem.

I am trying to use third party stencil components in my ember app. Build is ok, but when i visit the app, this error is thrown:

Uncaught TypeError: (0 , _loader.applyPolyfills) is not a function
    at Module.callback (auto-import-stencil-collections.js:10:1)

I created a new and empty Ember-App, so nothing else is in it. I am using:

• https://github.com/alexlafroscia/ember-cli-stencil

My package.json:

{
  "name": "desi-test-app",
  "version": "0.0.0",
  "private": true,
  "description": "Small description for desi-test-app goes here",
  "repository": "",
  "license": "MIT",
  "author": "",
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "build": "ember build --environment=production",
    "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
    "lint:css": "stylelint \"**/*.css\"",
    "lint:css:fix": "concurrently \"npm:lint:css -- --fix\"",
    "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
    "lint:hbs": "ember-template-lint .",
    "lint:hbs:fix": "ember-template-lint . --fix",
    "lint:js": "eslint . --cache",
    "lint:js:fix": "eslint . --fix",
    "start": "ember serve",
    "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
    "test:ember": "ember test"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.22.5",
    "@babel/plugin-proposal-decorators": "^7.22.5",
    "@ember/optional-features": "^2.0.0",
    "@ember/string": "^3.1.1",
    "@ember/test-helpers": "^3.1.0",
    "@glimmer/component": "^1.1.2",
    "@glimmer/tracking": "^1.1.2",
    "@my-secret-thirdparty-components": "^2.7.0",
    "broccoli-asset-rev": "^3.0.0",
    "concurrently": "^8.2.0",
    "ember-auto-import": "^2.6.3",
    "ember-cli": "^5.1.0",
    "ember-cli-app-version": "^6.0.1",
    "ember-cli-babel": "^7.26.11",
    "ember-cli-clean-css": "^2.0.0",
    "ember-cli-dependency-checker": "^3.3.2",
    "ember-cli-htmlbars": "^6.2.0",
    "ember-cli-inject-live-reload": "^2.1.0",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-stencil": "^1.0.0",
    "ember-cli-terser": "^4.0.2",
    "ember-data": "~5.1.0",
    "ember-fetch": "^8.1.2",
    "ember-load-initializers": "^2.1.2",
    "ember-modifier": "^4.1.0",
    "ember-page-title": "^7.0.0",
    "ember-qunit": "^7.0.0",
    "ember-resolver": "^10.1.1",
    "ember-source": "~5.1.1",
    "ember-template-lint": "^5.11.0",
    "ember-welcome-page": "^7.0.2",
    "eslint": "^8.43.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-ember": "^11.9.0",
    "eslint-plugin-n": "^16.0.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-qunit": "^8.0.0",
    "loader.js": "^4.7.0",
    "prettier": "^2.8.8",
    "qunit": "^2.19.4",
    "qunit-dom": "^2.0.0",
    "stylelint": "^15.9.0",
    "stylelint-config-standard": "^33.0.0",
    "stylelint-prettier": "^3.0.0",
    "tracked-built-ins": "^3.1.1",
    "webpack": "^5.88.2"
  },
  "engines": {
    "node": "16.* || >= 18"
  },
  "ember": {
    "edition": "octane"
  }
}

My ember-cli-build:

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function (defaults) {
  const app = new EmberApp(defaults, {
    // Add options here
    autoImport: {
      alias: {
        '@my-secret-thirdparty-components/loader': '@my-secret-thirdparty-components/dist/cjs/index.cjs',
      },
    }
  });


  return app.toTree();
};

persisting data in local storage using ember.js

I have some feature flags listed on the config file,

module.exports = function(environment) {
  let ENV = {
      featureFlags: {
        featureA: true, 
        featureB: false, 
        featureC: false,
        featureD: true,
      }
    }
  };

  return ENV;
};

and all the feature flags are shown as a card in a page.

    <UI::Card as |card| >
    <card.header @heading="Feature Flags" />
    <card.body as |body|>
        <div class="justify-content-between card-section">
            <ul class="list-group list-group-flush">
                
                    <li class="list-group-item justify-content-between align-items-center">
                      <div class="card-row flexbox">
                        <div class="card-left">
                          
                        </div>
                        <div class="card-right">
                            <UI::Switch
                            @value=
                            class="flex-grow-1"
                            @onClick=
                            />
                        </div>
                      </div>
                    </li>   
                
            </ul>
        </div>
    </card.body>
</UI::Card>

I am working with ember-tracked-local-storage library to connect the flags to the local storage.

@trackedInLocalStorage({ defaultValue: config.featureFlags }) featureFlags;

In the card whenever a feature flag is toggled I want to save that particular feature flag as an object to the local storage. If another flag is toggles it will get added on that object. And those particular feature flags should be shown as the saved value in local storage, and the other feature flags should be shown from the config file. There are less documentation on ember-tracked-local-storage. So, I am kinda lost on how I should go forward with this implementation.

Ember.js computed property not waiting for asynchronous RSVP promise

I have an Ember.js component where I'm trying to use a computed property to determine its visibility based on the result of an asynchronous RSVP promise. However, it seems like the computed property is not waiting for the promise to resolve, resulting in the count object being undefined.

Here's an excerpt from my component code:

import Component from '@ember/component';
import { computed } from '@ember/object';
import { inject as service } from '@ember/service';
import RSVP from 'rsvp';

export default Component.extend({
    classNames: ['count'],
    countService: service('count'),

    getCount: computed(function () {
        debugger;
        RSVP.all([
            this.get('countService').getCount()
        ]).then(([count]) => {
            return Number(count);
        });
    }),

    isVisible: computed('getCount', function () {
        debugger;
        let count = this.get('getCount');
        return count !== undefined && count > 0;
    }),
});

As you can see, the getCount computed property is calling a method getCount() on the countService injected service. This method returns a promise that resolves with the count value.

In the isVisible computed property, I'm trying to access the count value returned by the getCount computed property. However, when I log the value of count during debugging, it shows up as undefined, even though the promise should have resolved by that point.

I'm not sure why the computed property is not waiting for the promise to resolve before trying to access the value. Am I missing something in my implementation? Is there a better way to handle asynchronous dependencies in Ember.js computed properties?

Any help or insights would be greatly appreciated!