VPS deploy of EMber.JS & Python to Bluehost

good day to you all - I am having an engine which is built in Ember.JS (frontend) & Python at the Backend with PostgreSQL. I have not done any deploy to VPS so far on the said tech. Any idea or suggestion (documentation) that I should follow when I am deploying these 3 technologies on Bluehost VPS. Unfortunately Bluehost do not have any documentation regarding this. That's why seeking guidance.

is there any way to clear the current route view and do a new Transition for another router in ember?

In my ember app I have routes like this parent-route -> child-route -> leaf-route in my leaf route's willTransitionhook I will abort the transition based on some condition. also I'm storing the ember app object in global variable. so I can get router object from anywhere using this EmberApp.__container__.lookup("router:main"); and do transition using .transitionTo(another-parent-route). while I am on leaf-route's view, this transition won't work because its willTransition hook will abort the transition. So I need to clear my current router in router object and do fresh transition. is this possible? How can I achieve this? kindly suggest me any solution that help my case.

Can I able to make to an ajax call to j_security_check from my ember client?

So I have provided tomcat authentication with jsp in my tomcat webapp, Now I need to change the client side with ember. Now I need to have the same tomcat authentication flow. Can I able to make it happen with ember client as in jsp?

Catch (failed)net::ERR_NAME_NOT_RESOLVED in an Ember / Ember Data app

I'm working on an Ember app which uses Ember Data. We mainly use Rails and Postgres for the backend, but a smaller portion of our data is stored in a WordPress backend. WordPress is running on wp.example.com.

Ember Data is setup to work with both the Rails and WordPress backends, so I can do things like this:

// Get WordPress category by slug
this.store.query('wordpress/category', { slug }).then((models) => {
  // Leave page if no category was found
  if (typeof models.get('firstObject') == 'undefined') this.transitionTo('backupRoute');

  return models.get('firstObject');
});

Now I'd like to know how i can catch the error if the wp subdomain is offline.

When I change the WordPress backend URL (I'm not sure if that's the best way to simulate a failure), I get (failed)net::ERR_NAME_NOT_RESOLVED in Chrome DevTools after a few seconds and Ember showing error 500. Instead, I'd like to catch the network error and do something useful, in this case, a redirect.

Is there a way to catch those errors? Adding a simple catch() breaks the page completely. It remains white for about two minutes while there's a pending request, then it shows 502 Bad Gateway. I also get this in the logs:

my_service_1 | (node:1) UnhandledPromiseRejectionWarning: [object Object]
my_service_1 | (node:1) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 13)

Emberjs Textarea 2 way binding with data that needs to be a getter

I am using Emberjs Textarea which has 2 way binding with the @value attribute.

The data I am passing into the value is from an argument and therefore needs to be return from a getter before I can use it in the template.

My question is how do I use 2 way binding with a getter. I keep on getting error messages stating that Cannot set property inputText of #<InputComponent> which has only a getter

I have tried to use and tried to create a setter for the getter but nothing has worked.

The post requests actually work but I still get those annoying errors in the console.

// Component JS    
get inputText() {
  return this.args.text;
}

// Component Template

<Textarea @value= @focusOut= />

Ember 3.25 BelongsTo not sideloading

I am trying to sideload relationship data from one API call. I have a my two models setup like so:

Contest Model (child, belongsTo):

import Model, { attr, belongsTo } from '@ember-data/model';

export default class ContestModel extends Model {
  @attr('date') createdAt;
  @attr('string') description;

  @belongsTo('brand', { inverse: 'contests' }) brand;
}

Brand Model (parent, hasMany):

import Model, { attr, hasMany } from '@ember-data/model';

export default class BrandModel extends Model {
  @attr('date') createdAt;
  @attr('string') name;

  @hasMany('contest') contests;
}

I'm fetching via this line:

this.store.findRecord('contest', params.contest_id, { include: 'brand' });

This is the returned API payload:

{
  "data": {
    "type": "contest",
    "id": 1,
    "attributes": {
      "body_json": [
        {
          "question": "what time is it?",
          "answers": ["1PM", "2PM", "3PM", "4PM"]
        },
        {
          "question": "which collection is this artwork from?",
          "answers": ["botanical garden collection", "ghibli collection", "adventure collection", "swag collection"]
        }
      ],
      "created_at": "2021-05-23 18:00:00 -0700",
      "description": "a good description goes here"
    },
    "relationships": {
      "brand": {
        "links": {
          "self": "http://example.com/contests/2/relationships/brand" // not sure what this does
        },
        "data": { "type": "brand", "id": 2 }
      }
    },
    "links": {
      "self": "http://example.com/contests/2" // not sure how this is useful
    },
    "included": [
      {
        "id": 2,
        "type": "brand",
        "attributes": {
          "created_at": "2021-05-23 20:00:00 -0700",
          "name": "aloha vibe"
        }
      }
    ]
  }
}

The issue here is that calling myContest.brand returns a Proxy object just like in this SO post.

Is my API payload incorrect or is something misconfigured for my models? Or something else? I'm on Ember 3.25.3

Suggest a website where we get free instances and domine for my e commerce website

Suggest a website where we get free instances and domine for hosting my e commerce website

Emberjs: Use args as tracked property

I am doing a store query in the controller and then passing the result down to a child component.

// Controller
@tracked comment;

@action
async fetchComment() {
  const comment = await this.store.query('note', {
    filter: {
      listing: this.listing.id,
    },
  });

  if (comment && comment.length > 0) {
    this.comment = comment.firstObject;
  }
}


// Template
<MyComponent @comment= />

I want to use the arg to populate a tracked property in the child component.

// Component
@tracked comment = this.args.comment;

I found this does not work but works well as a getter. However with a getter I am unable to set this to null when deleting that record.

I have also tried to set the tracked property in the Constructor but that didnt work either.

I suspect this has something to do with passing in a promise or store object in the args because this works fine with static data.

Parent Page refreshing after Modal Dialog hide in Ember JS using scope or this .transitionToRoute

I have a modal dialog that opens up, after making changes and clicking save, its saving but not refreshing the data on the parent page, any help please?

Hi, I have a modal dialog that opens up, after making changes and clicking save, its saving but not refreshing the data on the parent page, any help please?

        setViolationInactive: function () {
            var scope = this;

            console.log('content');
            console.log(this.get('content.ResultId'));

            let model = this.get('model');
            console.log('model 001');
            console.log(model);

            //validating form
            if ($("#edit-violationinactive-form").validate()) {
                var data = {
                    ViolationId: this.get('model.ViolationId'),
                    ResultId: this.get('content.ResultId'),
                    InactiveComment: this.get('inactiveComment'),
                };

                scope.api('InspectionItem/SetViolationInactiveResult').post(data).then(function (response) {
                    $('.modal').modal('hide');
                    toastr.success("Violation set Inactive.");
                    scope.transitionToRoute("result.details");
                    scope.get('result.details').refreshData();
                    scope.clearForm();
                }, function (error) {
                    $('.modal').modal('hide');
                    scope.transitionToRoute('result.details');
                    toastr.error("Error saving violation inactive.");
                });
            }
            else {
                toastr.warning("Please fix the form", "Validation failed");
            }
        },

Any help why is it not refreshing the result details page, the route for that one is: result.details, any help please?

How to (if possible) call an Ember Action in a Javascript procedure or function?

My question is for an Ember Action defined in the same file as the Javascript procedure.

Components missing in EmberJS

I'm following a tutorial on EmberJS but seem to have an issue loading components. I created a component named gen-container, but upon adding GenContainer tag in a template, emberJS complains that the component can't be found.

I used the cli to generate the component.

YouTube tutorial https://www.youtube.com/watch?v=HP7LoPx2Ivs&list=PLk51HrKSBQ88wDXgPF-QLMfPFlLwcjTlo&index=4

Index.hbs

<GenContainer>
  <LinkTo @route="item" @model="1">Product 1</LinkTo>
  <LinkTo @route="item" @model="2">Product 2</LinkTo>
</GenContainer>

gen-container.hbs

<LinkTo @route="cart" class="cart-link">
  <FaIcon @icon="shopping-cart" />
</LinkTo>

<main class="container mt-5">
  
</main>

Highlighting text inserts duplicates in start and end of the text

I just need your help and insights with regards to a project I have inherited. There is this feature that a user can highlight a text and, from that text, open a comment box. this works well. But the issue I have encountered is that when you highlight the text from right to left, it inserts the actual text at the start and the end of the highlighted text.

To give an example, this is what happens.

"This is a sample text highlight"

When I highlight the sample text highlight from right to left, it will insert whatever is highlighted at the start and at the end of the text and it will appear as below"

"This is a sample text highlighsample text highlightsample text highlight"

Im very new to development and coding that I am trying to reverse engineer this and try to understand what the syntax means but as of the moment, getting stuck.

When highlighting the from left to right, this works great and no issues can be found.

This is the note of the function

  Basically, the member comments need to be highlighted from `startCharacter`
    to `endCharacter`. To achieve this we will insert some <span> tags around
    these regions and then render the HTML by marking it as "Safe" with `htmlSafe()`
  HOWEVER. This creates a problem: If the user includes HTML in their plan text,
    it will be rendered/executed.
  NOT WHAT YOU WANT (for Security reasons).
  SO. We need to first escape the user's plan text using `htmlEscape()`. 
  HOWEVER. This creates a SECONDARY problem, because now the indices stored
    in `startCharacter` and `endCharacter` are now incorrect, as we have changed
    the length of the string by changing `<` to `&lt;` etc. 
  SO HERE'S THE FINAL SOLUTION. 
      - FIRST we insert some very-unique strings at the `startCharacter` and
        `endCharacter` positions that are completely html-safe.
      - THEN we `htmlEscape()` the text. ```
      - THEN we find-replace the very-unique strings we inserted with the actual
        HTML we want.
      - THEN finally we mark the string as `htmlSafe()` so that our markup is rendered.

Getting a model is undefined error after upgrading to Ember 3.20.2

We have upgraded a few projects to use Ember 3.20.2 and we are working through issues and it's mostly going fine, but I have a really strange issue in one project.

We have retrieved records from the server as models, these models then get passed down a few levels through components and all the information about the model can be displayed in these components, except when we try and render one particular field on a template. The problem part of the template looks like:

<div title=>
    
</div>

and the model has the following:

details: DS.attr(),

The error that appears in the console looks like:

Uncaught TypeError: task is undefined
    Ember 2
        taskHelper
        fnWrapper
    deprecateMutationsInAutotrackingTransaction validator.js:149
    fnWrapper Ember
    computeTag reference.js:250
    runInAutotrackingTransaction validator.js:121
    track validator.js:774
    compute reference.js:249
    HelperRootReference reference.js:223
    Ember 2
        EmberHelperRootReference
        _lookupHelper
    ...

Is details now a restricted word? Some other issue?

Edit:

Actually I think I have narrowed down what the error is. It doesn't seem to like the title being . If I remove the title attribute everything seems to be working fine. The documentation for deprecateMutationsInAutotrackingTransaction is:

/**
     * Switches to deprecating within an autotracking transaction, if one exists.
     * If `runInAutotrackingTransaction` is called within the callback of this
     * method, it switches back to throwing an error, allowing zebra-striping of
     * the types of errors that are thrown.
     *
     * Does not start an autotracking transaction.
     *
     * NOTE: For Ember usage only, in general you should assert that these
     * invariants are true.
     */

which may suggest why some title attributes are failing, but I cannot make out much from that documentation.

ember.js warning: not set a 'height' attribute for table

I am newbie in EmberJS. I am working on an EmberJS project. I re-established the building environment. After that, one page of this webapp cannot be opened properly. There is a table on that page, the table doesn't show out. It works well before when the project was build in previous building environment which cannot be found any more...

I get this console log. It seems related with the issue, but I cannot find the solution.

WARNING: You did not set a `height` attribute for your table, but marked a header or footer to be fixed. This means that you have to set the table height via CSS. For more information please refer to:  https://github.com/offirgolan/ember-light-table/issues/446

after using pushErrors() method on changeset, the _errors property on the changeset holds an empty object

I wan to handle errors I receive from the server so when I catch one in my AJAX request I use the pushErrors() method like this:

.catch((error) => {
  let errors = get(error, 'errors');
  if (errors) errors.forEach(e => {
    changeset.pushErrors(get(e, 'fieldName'), get(e, 'fieldName') + "|" + get(e, 'constraintType') + "|" + i18n.t(get(e, 'fieldName') + get(e, 'constraintType')));
  });
});

When I check the changeset object after that the _errors property where my pushed error should have been holds an empty object. At the same time the addError() method seems to be working fine.

I use Ember version 2.16.0 and ember-changeset version 1.3.0

Emberjs: Assertion Failed: Attempting to inject an unknown injection: 'service:inViewport'

I get a injection error in my project. The project was coded in ember js 3.7. Recently, I rebuild the build environment as the original environment cannot be found. I guess this is caused by depracated dependancy... but there is no many information I can find. Can you help?

code: undefined
description: undefined
fileName: undefined
lineNumber: undefined
message: "Assertion Failed: Attempting to inject an unknown injection: 'service:inViewport'"
name: "Error"
number: undefined
stack: "Error: Assertion Failed: Attempting to inject an unknown injection: 'service:inViewport'\n**strong text**

How to muted video in Ember JS

I am newbie in Ember.JS. Below is the code in one hbs file.

     
          <img src=''>
     
          <video width="100%" height="100%" muted autoplay wrap controls>
            <source src=>
          </video>
     

I want to mute the video, I added muted in video tag. But it doesn't work. How I can I mute the video in Ember JS?

Is it possible to add comparing operation in condition #if in ember JS?

I am newbie in Ember JS. I try to add comparing operation in #if condition, but it doesn't work. Is it possible to add operation in condition #if in ember JS?

     
        <img alt='' src=''>
     
        <video width="100%" height="100%" playsinline=true autoplay=true muted=true loop=true wrap=true>
          <source src=>
        </video>
      

Thanks

ember.js Anyway to use store.query() as a POST request?

With Ember data store is there a way to make the store.query() method with a POST request instead of a GET?

We have an issue where our params sent down in a store query are far too large for the maximum HTTP limit. What seems to be the best workaround is sending our params as the body for a POST request. Is there anyway we can still use store.query() for that? I don't see anything in documentation and I've been recreating the functionality, but it is just getting messy and it feels like there has to be a better way.

Any help would be appreciated!

How to specify setInterval in emberjs?

I have a api call which need to be called every five seconds. I used setInterval in javascript to make api call in my dynamic web project. Now I am converting the entire frontend to emberjs , I am new to ember .Can anyone help me to resolve it.

How to do a sequential for loop in Ember.js?

I am using ember 2.1 and I would to apply an action for every line of a text file that I get using the Javascript FileReader api. Would anyone know how to do that?

-When I try using "foreach" the execution is not sequential: the program does not wait for one line to be recorded before starting treating the next line; hence I get lines skipped and have no control on the execution;
-I tried a simple for loop, but it didn't work and I read that they are not possible in Ember actions;
-When I use a recursive call to an Ember action (in the following code: saveNew(lines), called first by openFile(event)), another problem happen: every new line replaces the last one instead of being added to the last one, and at the end only the last line is recorded.

saveNew(lines) {
  
   const promise1 = new Promise((resolve, reject) => {

      var line=lines.shift();
      var cols = line.split(';');      
      var c=0;
      var patt = /[A-z ]/g;
      var result = patt.test(line);
      if (result==true) {
           
         this.model.name=cols[0]; console.log("named");
         this.model.url=cols[1]; console.log("urled");
         this.model.description=cols[2]; console.log("descripted"); console.log(cols[2]);
         this.get('model').save().then((source) => { console.log("in the insertion");
          
           this.send('toast', 'Source créée.'); console.log("wooouu");
          this.transitionToRoute('signed-in.sources.source', source); console.log("incredible");

      }).then(() => {setTimeout(() => {
    resolve(lines);
  }, 1000);
}); }
      else {resolve(lines);}
});

promise1.then((value) => {
  if (value.length>0) {this.send('saveNew',value);}
});
},

openFile(event) {

    console.log('upload');
    var input = event.target;
    var reader = new FileReader();
    console.log('ici');

    reader.addEventListener("load", ( function (e) {
        var text = e.target.result;
    text.replace(/(\r\n)|\r|\n/g, '\n');   //normalisation des caractères de retour à la ligne
    var lines = text.split(/\n+/g);  //séparation du texte du fichier en lignes
    var insnumb=0;
    const taille=lines.length;
    this.send('saveNew',lines);
      }).bind(this));
    reader.readAsText(input.files[0]);
  }

Closing tag did not match last open tag?

I'm currently learning ember.js through their ember.js guide and so far everything went by without an issue, but now I came across this part: https://guides.emberjs.com/v3.26.0/components/looping-through-lists/#toc_updating-lists

Out of frustration I copied everything 1:1 from the website, but I just get the following error:

Closing tag form (on line 6) did not match last open tag Inputglimmer-engine(syntax)

Closing tag did not match last open tag (on line 2): (error occurred in 'core-components/components/new-message-input.hbs' @ line 6 : column 0)

Here's the code:

new-message-input.hbs:

<form >
  <Input @value=>
  <button type="submit">
    Send
  </button>
</form>

new-message-input.js:

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class NewMessageInputComponent extends Component {
  @tracked message;

  @action
  createMessage(event) {
    event.preventDefault();

    if (this.message && this.args.onCreate) {
      this.args.onCreate(this.message);

      // reset the message input
      this.message = '';
    }
  }
}

messages.hbs:

<div class="messages">
  
    <Message
      @username=
      @userIsActive=
      @userLocaltime=
    >
      }
    </Message>
  

  <NewMessageInput @onCreate= />
</div>

messages.js:

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { A } from '@ember/array';

export default class MessagesComponent extends Component {
  username = 'Zoey';

  @action
  addMessage(messageText) {
    this.messages.pushObject({
      username: this.username,
      active: true,
      content: `<p>${messageText}</p>`
    });
  }

  messages = A([
    {
      username: 'Tomster',
      active: true,
      localTime: '4:56pm',
      content: `
        <p>
          Hey Zoey, have you had a chance to look at the EmberConf
          brainstorming doc I sent you?
        </p>
      `
    },
    {
      username: 'Zoey',
      active: true,
      content: `
        <p>Hey!</p>

        <p>
          I love the ideas! I'm really excited about where this year's
          EmberConf is going, I'm sure it's going to be the best one yet.
          Some quick notes:
        </p>

        <ul>
          <li>
            Definitely agree that we should double the coffee budget this
            year (it really is impressive how much we go through!)
          </li>
          <li>
            A blimp would definitely make the venue very easy to find, but
            I think it might be a bit out of our budget. Maybe we could
            rent some spotlights instead?
          </li>
          <li>
            We absolutely will need more hamster wheels, last year's line
            was <em>way</em> too long. Will get on that now before rental
            season hits its peak.
          </li>
        </ul>

        <p>Let me know when you've nailed down the dates!</p>
      `
    }
  ]);
}

How to send data from one component to another in ember.js?

I have a print-user.hbs component to display the user data stored in database. I have to edit the user data. So I created another component edit-user.hbs. I have to send the mailid of the user-data from print-user to edit-user So that i can update the data in database. I tried to call the function from print-user, but it is not working. I don't know how to send data from print-user to edit-user.

Getting error while using modal-dialog in ember.js

I just add the basic modal-dialog code But I am getting the error.

app/templates/application.hbs

Hi Guys!!

I am getting this error.

Uncaught Error: Attempted to resolve `modal-dialog`, which was expected to be a component, but nothing was found.
    at resolveComponent (opcode-compiler.js:234)
    at encodeOp (opcode-compiler.js:2583)
    at pushOp (opcode-compiler.js:2507)
    at opcode-compiler.js:2287
    at Compilers.compile (opcode-compiler.js:519)
    at compileStatements (opcode-compiler.js:2511)
    at maybeCompile (opcode-compiler.js:2490)
    at CompilableTemplateImpl.compile (opcode-compiler.js:2470)
    at Object.evaluate (runtime.js:3614)
    at AppendOpcodes.evaluate (runtime.js:1284)

How to add a pop-up dialog in ember.js

I have to print the user data stored in Database with edit option. So I need to get the data from user. I thought that using pop-up window will make it easy But i don't know how.

app/components/print-user.hbs

<input5  > 
    
</input5>
    <table class="styled-table">
        <thead>
            <tr><th>User Id</th>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Mailid</th>
                <th>Delete</th>
            </tr>
        </thead>
        
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <button>Edit</button>
                </tr>
            </tbody>
        
    </table>

app/components/print-user.js

import Component from '@glimmer/component';
import {action} from "@ember/object";
import {tracked} from "@glimmer/tracking";
import EditUserComponent from './edit-user';
export default class PrintUserComponent extends Component {
    constructor() {
        super(...arguments);
        this.searchuser("");
      }
    @tracked dummyresponse="";
    @action 
    async searchuser (searchtext){
        let response=await fetch("/UserManagement/SearchServlet",
        {   method: "POST",
            body: JSON.stringify({
                "type": "search",
                "searchtext": searchtext
            })
        });
        this.dummyresponse=await response.json();
    }
}

Help me to implement edit option in this.

This is how the print user looks like

how this.toggleProperty("editing") works in ember.js?

code

import Ember from 'ember'; export default Ember.Component.extend({

editing: false,
actions: {
    editTodo() {
        this.toggleProperty("editing");
    },
    submitTodo() {
        const todo = this.get("todo");
        if (todo.get("title") == "") {
            todo.destroyRecord().then(() => {
                this.toggleProperty("editing");
            });
        } else {
            this.toggleProperty("editing");
        }
    },
    deleteTodo() {
        this.get("todo").destroyRecord();
    }
}

});

how this 'editing' property get into action, can anyone please explain? I'm new to ember

How to add a modal(pop up) in ember.js version 3.26

I have to add a modal in my project to edit the user data.

Making a cookie available to a sibling domain with Ember

In an Ember app, we set cookies using ember-cookie. At the moment, the userToken cookie is available to www.example.com only. I need to make it available to api.example.com as well and expected below code to work: Even if domain (which is actually set through an environment variable) starts with "www", the cookie should be set one level higher (and thus be available to the api subdomain as well).

set cookieToken(token) {
  let domain = 'www.example.com';

  // Share with main domain (and API subdomain) even if host is www subdomain
  if (domain.startsWith('www')) {
    const apiSubdomain = domain.replace(/^www/, '');
    this.cookies.write('userToken', JSON.stringify(token), { path: '/', apiSubdomain })
  }
}

This approach failed, however:

• expected domain: .example.com
• observed domain: www.example.com

I also tried setting the cookie for api.example.com explicitly:

if (domain.startsWith('www')) {
  const apiSubdomain = domain.replace(/^www/, 'api');
  this.cookies.write('userToken', JSON.stringify(token), { path: '/', apiSubdomain })
}

The outcome was the same:

• expected domain: api.example.com
• observed domain: www.example.com

What can I do to make this cookie accesible for both subdomains?

Ember Not returning correct serialiser for model on calling store.serializerFor method

I have two models , record-type and record-type-choice, when I call store.serilizerFor or lookupserializer for on modal record-type-choice , the serializer for record-type is returned? can you guys help me with what I might be doing wrong?

model - record-type-choice

export default DS.Model.extend({
  value: attr('string'),
  position: attr('number'),
  type: attr('string'),
  dependentIds: attr({
    defaultValue() {
      return {};
    }
  }),
  dependencyMappingId: attr('string'),
  editable: attr('boolean')

});

serializer record-type-choice

export default ApplicationSerializer.extend({
  normalize(typeClass, hash, prop) {
    return this._super(typeClass, hash, prop);
  }
});

record-type model

export default DS.Model.extend({
  // recordTypeId: attr('number'),
  value: attr('string'),
  accessibleRoleIds: attr({ defaultValue: () => [] })
  // permissionStatus: attr('string'),
  // meta: attr()
});

How to call a function in a component from another component n ember.js?

I am in a print-user component after I click edit button I am redirecting edit-user component. I have to send the data from print-user to edit-user. So I am calling the edit-user component-class function from print-user component-class. But it is showing the error

app/components/print-user.hbs

</input5>
    <table class="styled-table">
        <thead>
            <tr><th>User Id</th>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Mailid</th>
                <th>Delete</th>
            </tr>
        </thead>
        
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <LinkTo @route="edit-user" ><button  >Edit</button>r</LinkTo></td>
                </tr>
            </tbody>
        
    </table>

app/components/print-user.js

import Component from '@glimmer/component';
import {action} from "@ember/object";
import {tracked} from "@glimmer/tracking";
import EditUserComponent from './edit-user';
export default class PrintUserComponent extends Component {
    @tracked dummyresponse="";
    @action 
    async printuser (){
        let response=await fetch("/UserManagement/SearchServlet",
        {   method: "POST",
            body: JSON.stringify({
                "type": "",
                "searchtext": ""
            })
        });
        this.dummyresponse=await response.json();
        
    }
    edituser (id,firstname,lastname,mailid){
        alert("print-user.js entered");
        console.log(EditUserComponent.edituser(id,firstname,lastname,mailid));
        alert("print-user.js after method call entered");
    }
}

app/components/edit-user.hbs

import Component from '@glimmer/component';

export default class EditUserComponent extends Component {

    async edituser (id,firstname,lastname,mailid){
        alert("edit-user.js entered");
        let response=await fetch("/UserManagement/UserManagementServlet",
        {   method: "POST",
            body: JSON.stringify({
                "type": "edit",
                "id": id,
                "firstname":firstname,
                "lastname":lastname,
                "mailid":mailid
            })
        });
    }
}

app/components/edit-user.js

import Component from '@glimmer/component';

export default class EditUserComponent extends Component {

    async edituser (id,firstname,lastname,mailid){
        alert("edit-user.js entered");
        let response=await fetch("/UserManagement/UserManagementServlet",
        {   method: "POST",
            body: JSON.stringify({
                "type": "edit",
                "id": id,
                "firstname":firstname,
                "lastname":lastname,
                "mailid":mailid
            })
        });
    }
}

Uncaught TypeError: _editUser.default.edituser is not a function
    at Proxy.edituser (print-user.js:88)
    at Proxy.<anonymous> (runtime.js:7105)

mCustomScrollBar with dropdown issue

I am currently working in client side, and I had the issue with mCustomScrollBar. I am using the selectpicker js for dropdown and uses data-container for that in UI and that dropdown has the search option. And I use mCustomScrollBar for that dropdown. when I search some value in that search box and if the search result size is below 5, then the scrollbar disappeared. The problem is once I enter with the dropdown of size 5, the scrollbar disappears and if I reopen that dropdown the scrollbar won't show. I debugged that issue and find that if I use the data-container, then only it causes this problem. Kindly give any better solution.

How to bind actions to markup in ember template by } (Template helper)?

I am constructing a markup string with an onclick action as shown below.

    helpInfoMarkup: computed('levelInfo.name', function() {
       return '<a class="help-text" ' + get(this, 'levelInfo.name') + '</a>';
    }

My .hbs file

<div>}</div>

However this is not binding to the ember action and just appears as part of the markup and does not work? Any thoughts on this ?