Passing variable value from js file to hbs component

user_14044267 0
Viewed 259

Hi I have a Global variable as in js file, I want to retrieve value of that Variable in hbs file

    export default () => {
    selectedViolationTypeId: 0,
    addProgram(program) {
         this.set('selectedViolationTypeId', program.ViolationTypeId);
     },
    }

The value of the selectedViolationTypeId changes in the addProgram function call, that changed value I want to retrieve in the hbs file, at the URL field like this: url='api/branch/inspectionitemcategories/dt?violationTypeId={selectedViolationTypeId}'

 <div class="col-md-8">
                    {{log 'selectedViolationTypeId'}}
                    {{log selectedViolationTypeId}}
                        <div class="form-group chosen-fix {{if failTest 'has-error q'}}">
                            <label class="control-label">Inspection Item Categories</label>
                            {{#drop-down url='api/branch/inspectionitemcategories/dt?violationTypeId={selectedViolationTypeId}'
                            id='idInspectionItemCategories'
                            required=false
                            placeholder='Add Program (Search)'
                            showSelected=false f=f as |item|
                            }}
                            {{log 'item 1'}}
                            {{log item}}
                            {{#if item}}
                            {{partial 'components/edit-item/partial-select1'}}
                            {{else}}
                            <i>Nothing Here</i>
                            {{/if}}
                            {{/drop-down}}
                        </div>
                    </div>

But its not happening, at the url field this selected value is coming as null with error message as below

:56974/api/branch/inspectionitemcategories/dt?violationTypeId={{this.selectedViolationTypeId}}:1 Failed to load resource: the server responded with a status of 400 (Bad Request)
api.js:77 api/branch/inspectionitemcategories/dt?violationTypeId={{this.selectedViolationTypeId}} error undefined Object

can somebody please help me how can I retrieve its value in the front end hbs file?

ember.js html javascript
1 Answers

You can make global variable value visible in the hbs template by defining a property in the component / controller. So, in your component code, define a getter:

import Component from '@glimmer/component';

export default class MyComponent extends Component {
  get violationTypeId() {
    return selectedViolationTypeId;
  }
}

And now you can use it in template:

{{log this.violationTypeId}}

P. S. You could use this global variable via a service. Either add it to an existing service, if the value belongs there logically, or create a new service:

import Service from '@ember/service';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

export default class MyService extends Service {
  @tracked selectedViolationTypeId = DEFAULT_VALUE;

  @action addProgram(program) {
    this.selectedViolationTypeId = program?.ViolationTypeId;
  }
}

Then, you can inject this service into your component / controller:

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

export default class MyComponent extends Component {
  @service myService;
}

And use the value in template:

{{log this.myService.selectedViolationTypeId}}
user_62587850
Related