[英]Passing variable value from js file to hbs component
Hi I have a Global variable as in js file, I want to retrieve value of that Variable in hbs file嗨,我在 js 文件中有一个全局变量,我想在 hbs 文件中检索该变量的值
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}' selectedViolationTypeId 的值在 addProgram 函数调用中更改,我想在 hbs 文件中检索的更改值在 URL 字段中如下所示: 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但它没有发生,在 url 字段中,这个选定的值是空的,错误消息如下
: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?有人可以帮助我如何在前端 hbs 文件中检索它的值吗?
You can make global variable value visible in the hbs template by defining a property in the component / controller.您可以通过在组件/控制器中定义属性来使全局变量值在 hbs 模板中可见。 So, in your component code, define a getter:因此,在您的组件代码中,定义一个 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}}
PS You could use this global variable via a service. PS 您可以通过服务使用此全局变量。 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}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.