Hola, tengo una variable global como en el archivo js, quiero recuperar el valor de esa variable en el archivo hbs
export default () => { selectedViolationTypeId: 0, addProgram(program) { this.set('selectedViolationTypeId', program.ViolationTypeId); }, }El valor de selectedViolationTypeId cambia en la llamada a la función addProgram, ese valor cambiado que quiero recuperar en el archivo hbs, en el campo URL como este: 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>Pero no está sucediendo, en el campo de URL, este valor seleccionado es nulo con el mensaje de error que se muestra a continuación
: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¿Alguien puede ayudarme? ¿Cómo puedo recuperar su valor en el archivo hbs de la interfaz?
Puede hacer visible el valor de la variable global en la plantilla hbs definiendo una propiedad en el componente/controlador. Entonces, en el código de su componente, defina un captador:
import Component from '@glimmer/component'; export default class MyComponent extends Component { get violationTypeId() { return selectedViolationTypeId; } }Y ahora puedes usarlo en la plantilla:
{{log this.violationTypeId}}PD: podría usar esta variable global a través de un servicio. Añádalo a un servicio existente, si el valor pertenece allí lógicamente, o cree un nuevo servicio:
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; } }Luego, puede inyectar este servicio en su componente/controlador:
import Component from '@glimmer/component'; import { inject as service } from '@ember/service'; export default class MyComponent extends Component { @service myService; }Y use el valor en la plantilla:
{{log this.myService.selectedViolationTypeId}}