Ember js - send request and receive response from backend java server

I have build my backend using java and the datas will be returned in json format. Using ember as frontend, how do I send request and receive response to fetch the data from server. Im completely new to ember and expecting some examples.

How to replace `@computed` with setter returning new value with new native setters?

Problem

I've often used this kind of computed properties where the setter simply returns the new value :

  @computed('args.myValue')
  get myValue() {
    return this.args.myValue;
  }
  set myValue(newValue) {
    return newValue; // <==== this is no longer valid with native setter
  }

This does few things :

1. Set initial value to args.myValue
2. Allow to change the value (typically through an <Input @value= />)
3. Restore the default value when args.myValue changes

The problem comes with native setters which can't return any value.

Notice I could probably find a "hackish" solution but I'd like to have code that follows new EmberJS conventions in order to avoid painfull later updates.

Things I tried

Manual caching

  @tracked _myValue = null;

  get myValue() {
    return this._myValue || this.args.myValue;
  }
  set myValue(newValue) {
    this._myValue = newValue;
  }

This does not work because _myValue is always set after the first myValue=(newValue). In order to make it work, there should be some kind of observer which resets it to null on args.myValue change.

Sadly, observers are no longer part of EmberJS with native classes.

helper

<Input @value= />

As expected, it does not work because it just doesn't update myValue.

helper combined with event.target.value handling

<Input @value=  />

  get myValue() {
    return this.args.myValue;
  }

  @action keyPressed(event) {
    this.doStuffThatWillUpdateAtSomeTimeMyValue(event.target.value);
  }

But the Input is still not updated when the args.myValue changes.

Initial code

Here is a more concrete use example :

Component

// app/components/my-component.js

export default class MyComponent extends Component {

  @computed('args.projectName')
  get projectName() {
    return this.args.projectName;
  }
  set projectName(newValue) {
    return newValue; // <==== this is no longer valid with native setter
  }

  @action
  searchProjects() {
    /* event key stuff omitted */
    const query = this.projectName;
    this.args.queryProjects(query);
  }
}

<Input @value=  />

Controller

// app/controllers/index.js

export default class IndexController extends Controller {

  get entry() {
    return this.model.entry;
  }

  get entryProjectName() {
    return this.entry.get('project.name');
  }

  @tracked queriedProjects = null;

  @action queryProjects(query) {
    this.store.query('project', { filter: { query: query } })
      .then((projects) => this.queriedProjects = projects);
  }

  @action setEntryProject(project) {
    this.entry.project = project;
  }
}

<MyComponent 
  @projectName= 
  @searchProjects= />

When the queriedProjects are set in the controller, the component displays them.

When one of those search results is clicked, the controller updates the setEntryProject is called.

Dynamic model in LinkTo component in Ember

I am using Ember 3.18, I am facing the below issue. Consider the following routes:

Router.map(function() {
  this.route('author');
  this.route('author' , {path:"/author/:author_id"});
});

Now, in my hbs file, I am trying to transition to the above routes using a single LinkTo. As you can see, only the second route requires model attribute. In simple terms, I want to combine the below 2 into a single line.

<LinkTo @route="author" />
<LinkTo @route="author" @model="2" />

As you can see, I require the model attribute to be gone in certain cases and availble in certain cases.

Please help.

Dispatch event on body tag with another element as the target

I have a client that uses EmberJS on their website. When I want to inject a value to one of the text input fields with elem.value="##", it changes the text inside the field, but does not update the variables that are sent to the server. It seems like there is an event listener on the <body> tag that does it. Is there a way to dispatch an event on the <body> element with some other element as the target?

Variable/Changing ember number in Intercom HTML. Selenium Python

I am trying to automate some tasks at work. Requests wont work because I don't have admin access to my works Intercom App. Therefore I use Selenium.

I want to write "Hey" in the chat box of Intercom, and send the message.

** The problem is a changing ember number every time I have a new conversation. It works when I copy the right ember number every time, but when changing the conversation, it doesn't work anymore. **

I am looking for some kind of script to change the ember = XXXXX into the right number each time

Not really relevant to the code problem, but I am using Chrome in debugging mode, to avoid logging in every time I need to test the code, and I am using tkinter to have a button to press, every time I want to write "Hey" in the chat box.

Sorry, I understand it is difficult to replicate this problem.

from selenium import webdriver
from selenium.webdriver.chrome.options import Options 

#___________
#In order to run Selenium in an already opened browser / session, I need to run this code in CMD:
#cd C:\Program Files (x86)\Google\Chrome\Application
#
#chrome.exe --remote-debugging-port=9222 --user-data-dir="C:\Users\peter\testprogram"
#___________

opt=Options()
opt.add_experimental_option("debuggerAddress","localhost:9222")
driver=webdriver.Chrome(executable_path="
C:\\ProgramFiles\\crromedriver\\chromedriver.exe",options=opt)

def hey():

    ember = 32890
    hey = driver.find_element_by_xpath('//*[@id="ember'+str(ember)+'"]/div/div[3]/div[1]/div/p')

    hey.send_keys("Hey!")

The specific HTML element where I want to write "Hey!": (This is under the big HTML code below)

<p class="intercom-interblocks-align-left embercom-prosemirror-composer-block-selected" style="">Hey! This is where I want my text</p>

One might suggest to use

hey = driver.find_element_by_class_name('intercom-interblocks-align-left embercom-prosemirror-composer-block-selected')
hey.send_keys("Hey!")

But this doesn't work for me.

The HTML element where the ember number is changing:

<div id="ember32890" class="u__relative inbox__conversation-composer__wrapper ember-view"><div>
    <div></div>
      <div>        
      
</div>

<div data-test-prosemirror-composer="" class="composer-inbox composer-style-basic o__fit conversation__text embercom-prosemirror-composer ">
    <style>
  .ProseMirror {
    outline: none;
    white-space: pre-wrap;
  }

  .ProseMirror .intercom-interblocks-html-block {
    white-space: normal;
  }

  li.ProseMirror-selectednode {
    outline: none;
  }

  .ProseMirror-selectednode.embercom-prosemirror-composer-image img,
  .ProseMirror-selectednode.embercom-prosemirror-composer-video iframe,
  .ProseMirror-selectednode.embercom-prosemirror-composer-messenger-card
    .intercom-interblocks-messenger-card,
  .ProseMirror-selectednode.embercom-prosemirror-composer-html-block,
  .ProseMirror-selectednode.embercom-prosemirror-composer-button .intercom-h2b-button {
    outline: 2px solid #8cf;
  }

  hr.ProseMirror-selectednode,
  .embercom-prosemirror-composer-template.ProseMirror-selectednode,
  .embercom-prosemirror-composer-mention.ProseMirror-selectednode {
    outline: 1px solid #8cf;
  }
</style>
    <div>
<!----><div contenteditable="true" role="textbox" dir="auto" data-insertable="true" class="ProseMirror embercom-prosemirror-composer-editor dir-auto"><p class="intercom-interblocks-align-left embercom-prosemirror-composer-block-selected" style="">Hey!Hey!Hey!Hey!Hey!</p><p class="intercom-interblocks-align-left" style=""><br></p></div></div>
      <div class="flex flex-row flex-wrap gap-4 embercom-prosemirror-composer-attachment-list">
<!----></div>

      <!---->
      <!---->
      <!---->
      <!---->

      <!---->
      <div></div>
<!---->

<!----></div>
        <!---->

<!----></div></div>

POST request on form submit ember.js

I am totally green in Ember.JS. I’ve made simple adoption shelter application with Ember tutorials as I am using ember on front end, and Strapi (Node.JS) as an Headless CMS. I have all the endpoints and my ember front is successfully fetching data with GET method via JavaScript’s fetch. However, I want to allow users to create POST requests based on form submit, I can’t find any good example or tutorial how to properly make an post request on form submit in ember.js, could you please help me with figuring out how to do this?

Will an ember.js application that pulls its content from an API be properly indexed in Google?

I'm thinking of moving my company's static site to an ember.js page that will pull text and images from an API (specifically strapi).

The most pressing issue I have before starting this project is: Will the site still be properly indexed in search engines?

Ember.js, like other single page frameworks, only delivers a very slim HTML shim on first load, and then pulls or generates its content dynamically in JS. I've been trying to find a definitive answer, but so far to no avail, wether google will correctly index the content of pages.

If not built-in, will a plug-in like fastboot help in delivering the content properly to crawlers?

Emberjs - How to map api json response to a model?

While trying to build an Ember.js sample application, to call a REST Api and display results. I was able to call, fetch and display the results. In the component I am reading through the json response results.

How can I map the response data to a pre-defined model and use that in the component instead? I could not find relevant docs at https://guides.emberjs.com/release/models/defining-models/ or https://guides.emberjs.com/release/in-depth-topics/making-api-requests/#toc_where-to-make-api-requests

Code details:

1. Using this sample API https://reqres.in/api/users
2. Route:

export default class UsersRoute extends Route {
  async model() {
    let response = await fetch('https://reqres.in/api/users');
    let data = await response.json();
    return data.data;
  }
}

3. Template:

<UserList
  @title="List of Users"
  @users=
/>

4. Component:

    <tr>
      <td></td>
       <td></td>
       <td></td>
       <td></td>
    </tr>
  

Ember 4.1. Django rest json api. Access field choices from OPTIONS request in Ember data model or elsewhere

My DRF JSON API backend responds with a JSON on OPTIONS request. The OPTIONS response includes field choices declared on Django model. On my frontend, in my Ember 4.1 app with default JSONApiAdapter I want to use these exact same choices on my form select. Is there a way to access these choices on my Ember model or somewhere else? and if so, How do I do it? Here's an example OPTIONS response:

{
    "data": {
        "name": "Names List",
        "description": "API endpoint for Names",
        "renders": [
            "application/vnd.api+json",
            "text/html"
        ],
        "parses": [
            "application/vnd.api+json",
            "application/x-www-form-urlencoded",
            "multipart/form-data"
        ],
        "allowed_methods": [
            "GET",
            "POST",
            "HEAD",
            "OPTIONS"
        ],
        "actions": {
            "POST": {
                "name": {
                    "type": "String",
                    "required": true,
                    "read_only": false,
                    "write_only": false,
                    "label": "Name",
                    "help_text": "name",
                    "max_length": 255
                },
                "name-type": {
                    "type": "Choice",
                    "required": true,
                    "read_only": false,
                    "write_only": false,
                    "label": "Name type",
                    "help_text": "Name type",
                    "choices": [
                        {
                            "value": "S",
                            "display_name": "Short"
                        },
                        {
                            "value": "L",
                            "display_name": "
                    ]
                }
            }
        }
    }
}

How can I resolve a TypeError using old version of ember and ember-light-table?

I have the test project at https://github.com/ericg-ember-questions/test_computed_sort

I setup the project by doing the following:

Node version: v12.18.1 (npm v6.14.5)

1. npm install --save-dev ember-cli@3.4
2. ./node_modules/.bin/ember new test_computed_sort
3. cd test_computed_sort/
4. ./node_modules/.bin/ember install ember-light-table@1.13.2
5. ./node_modules/.bin/ember generate component test-comp
6. ./node_modules/.bin/ember serve

application.hbs

test-comp.hbs

Hello

If I comment out the reference to light-table, no error is generated. However, with it, I see in the console:

media.js:15 Uncaught TypeError: decorator is not a function
    at media.js:15:1
    at Array.reduce (<anonymous>)
    at _applyDecoratedDescriptor (media.js:15:1)
    at Module.callback (media.js:240:1)
    at Module.exports (loader.js:106:1)
    at Module._reify (loader.js:143:1)
    at Module.reify (loader.js:130:1)
    at Module.exports (loader.js:104:1)
    at requireModule (loader.js:27:1)
    at Class._extractDefaultExport (index.js:432:1)

What can I do to resolve this error so I can use ember-light-table with this project?