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!