Ember load data from local file

Hi I am trying to load data (products) from local file. Here is how I try to fetch data:

import { products } from '../data/products'; 

export default class ItemRoute extends Route {
    model(params){
        const item_id = params;
        console.log(item_id);
        const product = products.find(({ id }) => id === item_id);
        
        return item_id;
    }
}

but I get this error Uncaught Error: Could not find module ember-app/data/products imported from ember-app/routes/item.

Can someone, please, give advice how to resolve that? Thanks a lot.

Ember Data - Opposite of model.serialize()?

In Ember Data 3.24, if you do

foo = record.serialize()

how can you reverse the process? i.e. deserialize the JS object in foo and update the record?

Close mock-socket with a specific closure code

I'm using the mock-socket package to test some websocket connection based code. I close the mocks server by mockServer.stop() which closes the client connection with a websocket code of 1006. Is there anyway to specify the close code? I haven't found much documentation on this.

Loading data with ember infinity model

I have a code to load data using infinityModel in my route. Once I get the data from the API I have some more code that needs to be executed. Ex.

1. return this.InfinityModel('user', . ....).then(users => {
2. //Some code here
3. })

For testing, the perPage is set to 4 and there are 8 records. First 4 records are fetched and the entire code gets executed(1 to 3 lines in the above example). Then when I scroll down in the UI, the api call is made and the next set of records are retrieved, however the extra code line 2 - "//Some code here" does not get executed. Is there a way to get the entire block of code to execute rather than just loading the subsequent set of data. Thanks in advance...

How to prettify commit diff returned from Github API request on a web UI

I'm using the Github API to make a request to get the diff between 2 commits. I'm using the diff media type and getting the diff back as a string. This is all working fine, except now I'm challenged with having to display this diff on the web UI that I'm building (its in Ember). The desired outcome is to have additions colored in green and deletions shown in red. I'm guessing if there's no existing libraries or addons that do this, I might need to do some regex looking for +'s and -'s and then applying styles dynamically to the matched substrings, but that seems like a shakey idea (what if there are + or - in the code itself?).

Has anyone tackled this before? I don't know if I haven't found the right search term, but I can't seem to find any information on how to do this.

Need to show/hide a button depending on the page

I am trying to hide back button on site-header that takes me to dashboard. I am using pod structure that is something like this:

• pod
  • component
    • site-header
      • template.hbs
      • component.js
  • main
    • dashboard

In the component.js I used computed to get current route

 dashboard:computed('currentRouteName',function(){
    if(this.get('currentRouteName') === 'main.dashboard.index'){
      return true;
    }
    return false;
})

In template.hbs I used the following code to check the link.

Still it is the same by tweaking the if/else conditions also I either get the button on all pages or on none. Any help will be appreciated

Ember routes not displaying template content

For some reason, all Ember routes stopped working for me. I was working on a login route, where a login pop-up appears. Everything worked fine. After I saved the changes, made sure again that it's working and closed everything, upon starting the app again all routes stopped working - they don't display any content. The main page/route works still fine.

I tried to restart my pc and the app. I tried to overwrite the login route. I tried to generate entirely new route with just some basic "Hello" line to see if it's working (it's not). I even tried to create an entirely new app, still not working.

I use ember g route XY to generate routes.

Here is how the login template looks (was fully functionable):

<div id="popup" class="modal-bg">
    <div class="modal">
      <div class="center">
        <form action = "#">
          <div class="data">
            <span class='label'>Email or Username</span>
            <input type="text" required>
          </div>
          <div class="data">
            <span class='label'>Password</span>
            <input type="password" required>
          </div>
          <div class = "forgot-pass"><a href="">Forgot password?</a></div>
          <div class = "btn">
            <div class= "inner"></div>
            <button type = "submit">Log in</button>
          </div>
        </form>
      </div>
    </div>
  </div>


<script>
 var modal = document.getElementById('popup');

 window.onclick = function(event) {
   if (event.target == modal) {
     window.history.go(-1); return false;
   }
 }
</script>

Here is some basic route template which is supposed to write "hello" under the footer, but it also doesn't work anymore

 
   <p>hello</p>>
 

Any ideas what is the cause and how can I fix it? Thank you!

Javascript on-click handler, how to check if clicked by mouse or keydown?

I have an ember.js application with a button with an on-click method. For the purpose of accessibility I need to tell if the button was clicked by a standard mouse click or by the user hitting enter with the button focused. As a very basic idea:

onClickMethod() {
    doSomeStuff();
    if (buttonWasClickedByMouse) {
        doMouseThing();
    } else {
        doKeyDownThing();
    }
}

Is there a good way in Javascript to get this? I looked into originalEvent.detail, but that seems to be jQuery rather.

How to display contents of routes on the website in selected fields in Ember

I'm doing a small project in Ember, which I'm really new to. I have an Ember app with a main page/route.

Main pic

What I want is that if I click on "About" etc., the contents of that route (some text, pic, whatever) will be displayed on the page in left column let's say, or wherever else I want it on the page.

So far everything I tried makes the contents appear under the footer. I tried doing this in about.hbs, thinking that if I specify the position of the contents with , which is how the page is sectioned in the index.html file, it would work. But no, all it does is creating an identical left column under the footer.

    
<div class = "container">
    <div class = "left-col">
        <p>hello</p>
    </div>
</div>

Any help would be appreciated!

Build error (SourceMapConcat) no such file or directory, open tmp/source_map_concat-input_base_path-.tmp/bower_components/jquery/dist/jquery.js

When I am trying to run my ember application I am getting this few depreciations, warnings & this build error.

Build failed. Build Error (SourceMapConcat)

ENOENT: no such file or directory, open '/home/metro/dhi_workspace/metropolis_sw/source/ui_ember/tmp/source_map_concat-input_base_path-DY5tdz4b.tmp/bower_components/jquery/dist/jquery.js'

enter image description here

As a solution when I am trying to update jquery : bower install jquery ror delete bower_components & update all bower packages: bower install I am getting options like this. Which one should I choose ? Is there some other way to solve the build error.

enter image description here

Ember UI not loading

Ember UI is not loading on staging env with below error message in the console

vendor-fc7ff223306b879e26e5fb5c6862cc79.js:2693 Uncaught TypeError: e.indexOf is not a function
    at De (vendor-fc7ff223306b879e26e5fb5c6862cc79.js:2693)
    at n.property (vendor-fc7ff223306b879e26e5fb5c6862cc79.js:2709)
    at Le (vendor-fc7ff223306b879e26e5fb5c6862cc79.js:2727)
    at vendor-fc7ff223306b879e26e5fb5c6862cc79.js:4507
    at Array.reduce (<anonymous>)
    at s.callback (vendor-fc7ff223306b879e26e5fb5c6862cc79.js:4507)
    at s.exports (vendor-fc7ff223306b879e26e5fb5c6862cc79.js:18)
    at s._reify (vendor-fc7ff223306b879e26e5fb5c6862cc79.js:21)
    at s.reify (vendor-fc7ff223306b879e26e5fb5c6862cc79.js:20)
    at s.exports (vendor-fc7ff223306b879e26e5fb5c6862cc79.js:17)

I am clueless what could cause this and it not reproducible locally. As it is working fine locally.

But when I open the UI in staging it gives me a blank page and above error message in the console.

Updated relationship data not sent to server with Ember and Ember Data

I took over an app written in Ember, which is fairly new to me. Also, I learned Ember Octane, but the app is using Ember 3.2. It also uses Ember Data with the default JSONAPISerializer.

In my app there's a project model, and each model belongs to a creator, which is an instance of a person:

In models/projects.js:

creator: DS.belongsTo('person', { inverse: null }),

I want to update this relationship data (assign a new creator to the project) in a controller method:

project.set('creator', otherPerson); // or project.creator_id = otherPerson.id;
project.save();

The POST request is successful, but there isn't any relationship data in the payload, hence the creator isn't updated.

What's wrong here?

Ember - best way to include large data stubs

I have a folder in an Ember addon containing some very large JSON payloads, which I use to stub responses in my tests. Each response is exported from a .js file using ES6 imports, because this makes it easy to import the stubs into my tests.

The problem is that these files are massively slowing down my builds, as Babel is parsing them.

I can't find a way to use the Babel ignore option with ember-cli-babel. If this is possible, having Babel ignore that directory would be first prize.

One other idea I have is to place all of the JSON in a string property as below, and then parsing it when I import the file.

stubs/payload.js

export default {jsonString: `...Large JSON payload here`}

testfile.js

import payload from 'stubs/payload.js'
...
var response = JSON.parse(payload.jsonString);
...

I'm not entirely sure if that will really help. Has anyone found a more sane solution to this?

Does ember-collapsible-panel has octane support?

I have upgraded ember app 2.15 to 3.16 version. I am using ember-collapsible-pannel@latest version. After upgrading to octane version, ember-collapsible-panel seems not working properly. facing below issue. issue

Can anyone please help me to fix this issue. Thanks in advance!

Google Picker with Ember front end + server side authentication

Scene:

1. I'm building with Ember as my front end (simple auth)
2. Authentication is server side running on Node. Bearer, refresh token etc.
3. I've already integrated Classroom API & Drive API - interacting between front end and back end perfectly.

Objective:

1. To display Google Picker - so users can select & upload files to/from Google Drive.

Most examples are client-side auth - so I need help and suggestions how to do so for my case where the authentication is server-side. I hope this makes sense, I'm fairly new to Ember and everything!

How to know when Ember query params have loaded without using Route?

I am working on a 3rd party Search component that filters based on query params in the URL. If no query params are provided, a default search is made on init().

I am having an issue because at the time my component init() runs, the query params values have not yet been assigned.

On previous occasions, I have been able solve this problem using Route hooks, for example

setupController() {
    controller.loadSearchResults()
  }

because at the point setupController is run, the query params have their correct values.

On this occasion, due to it being a third party library I only have access to a controller and component. Is there any way to know/wait for queryParams to be assigned outside of a Route? I'm hoping for some kind of lifecycle hook such as Controller.didLoadQueryParams

The Ember docs seem to be lacking in this area as discussed in https://github.com/emberjs/rfcs/issues/196

Is there a way to tell if a yielded component's has-block is empty?

I am trying to make a contextual component that can provide a default header when one is not passed in the yielded block. Normally, I could use the has-block helper to tell if a component has block content but this component will always have block content. I think what I need is a way to tell if the yielded component has block content. For example:

<header>
  
  
    <h1>My Default Header</h1>
  
</header>
<section>
  
</section>
<footer>
  
</footer>

I only want the default header to show when the yielded "header" section is empty. I could create a header component which then could use the has-block like so:

 
    <header>
      
    </header>
...



 
     
          
     
         <h1>My Default</h1>
     

Functionally I think this will work but the only purpose of the "my-header" component would be for this "panel" component and seems wasteful. Open to ideas. Thanks!

Strange bugs EmberJS + TailwindCSS

I'm testing tailwind and ember for a musical website. I experience several bugs:

• in dev server, all links start with a capital letter; on some links the capital letter disappears (live demo, artists). what a strange bug: I thought of correcting it by specifying "uppercase" on all links,
• in production, the navbar doesn't show correctly; it should be like the first template of the webpage (the free template, https://tailwindui.com/components/marketing/sections/heroes),
• the speed in production is not good. with vue and Django, I get a lighthouse mobile speed score between 100 and 97. with EmberJS, I get a mobile speed of 70, and a desktop speed of 90 (https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fthemusicstop.netlify.app%2F&tab=desktop)

Any help deeply appreciated. I want to use EmberJS instead of Django or Vue but I'm a bit concerned with all the bugs I face.

Storybook adds a period after http: to all links and scripts in preview-head.html, how to remove this

I am using Storybookjs with Emberjs. When it generates the preview-head.html file it adds all the links and scripts in my current index.html file but adds a period after the : causing them to not work.

Example of link in preview-head.html

<link rel="stylesheet" href="https:.//s3-ap-southeast-2.amazonaws.com/myapp/styles.css" />

Any ideas why this is happening and how to stop it?

How to use components and controllers in ember.js

I am new to ember.js and there is a practice challenge on an app https://github.com/tunapanda/frontend-ember-challenge

The challenges are:

1. Add an action to the Single Task Component that sends a task up to the Index Controller so it can be shown as being “pinned”
2. Add a computed property to the Index Controller so that the “completed task” count updates automatically 3.Add a button Component called ToggleComplete that toggles the text from ‘Done’ to ‘Undo’

I find the learning curve a little steep and any help will do

Handlebars if statement issue

     
          
            <div class="item">
              
            </div>
          
      

It is only giving div with moderator only not with organizer

How do I find the xpath of a dynamic ember module - code doesn't appear in "inspect"

I'm using Selenium to automatically export data from LinkedIn. My code works up until I click the export button in the analytics section, then I'm stuck because I can't find the xpath or id of the input box to enter in the desired dates.

When I try to find the xpath in the html, the webpage closes the datepicker module, and the inspect element view hides whatever code was opened.

I'm using Python 3, windows 10, vscode...

Can we use Ember.js to build a static website?

Can we use Ember.js to build a static website? We are going to store the website in AWS S3.

Kind regards

Ember add-on random tests fail with "Can not call `.lookup` after the owner has been destroyed” after updating ember and dependencies

I updated my add-on’s dependencies, and ember version to use octane (following ember guide). The add-on works correctly as it did before, but not the tests. A single random test (not always the same test) fails, and if I re-run the single test by itself, it passes. The random test failure error is always the same: Can not call `.lookup` after the owner has been destroyed.

I’ve also tried running test related code-mods, but that resulted in more errors, in addition to the aforementioned random test error, so I reverted the code-mods. (I plan on updating tests to use the latest style but would rather do that in a separate effort, if possible). I'd greatly appreciate any info on why this error occurs, or how I can get rid of it.

If it helps, I originally had these as part of my dependencies (before updating):

"ember-cli": "~3.0.4",
"ember-source": "~3.0.0",
"ember-cli-pretender": "1.0.1",
"ember-cli-qunit": "^4.3.2",
"ember-native-dom-helpers": "^0.6.2",
"ember-qunit-assert-helpers": "0.2.1",
"ember-qunit-nice-errors": "^1.2.0",
"ember-qunit-source-map": "^1.2.0",
"ember-sinon": "^2.1.0",
"ember-sinon-qunit": "^3.1.0",
"ember-test-selectors": "^0.3.9”,

I now have these as part of my dependencies (after my update):

"ember-cli": "~3.23.0",
"ember-source": "~3.23.1",
"ember-cli-pretender": "4.0.0",
"ember-native-dom-helpers": "^0.6.3",
"ember-qunit": "^4.6.0",
"ember-qunit-assert-helpers": "0.2.2",
"ember-qunit-nice-errors": "^1.2.0",
"ember-qunit-source-map": "^1.2.0",
"ember-sinon": "^5.0.0",
"ember-sinon-qunit": "^5.0.0",
"ember-test-selectors": "^5.0.0",
"qunit-dom": "^1.6.0”,

Thank you very much!!

How to render ember template for a nested dynamic route?

js`, I have declared some nested routes like this:

Router.map(function() {
  this.route('index', { path: '/' })
  this.route('orders', function() {
    this.route('details', { path: '/:order_id' });
  });
  this.route('not-found', { path: '/*path' });
});

Here the orders.details template is not rendering, the but it is going to the correct route file, Here is the route file:

import Route from '@ember/routing/route';

export default Route.extend({
  model(params) {
    const { order_id } = params;
    console.log('params', params);
    return order_id;
  },
  renderTemplate() {
    this.render('orders/details')
  }
});

I also declared the template in a nested manner within orders folder:

This does not render the orders/details template, it always goes to the orders template. Here is my orders/details.hbs template:

<h2>Order </h2>