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?
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}}