我一直在尝试从组件类的操作中获取组件属性的值。我的主要目标是关联两个对象：传递到组件中的“拍卖”（如下代码所示）
new.hbs
<AuctionForm
@auction={{@model.auction}}
@products={{@model.products}}/>
将所选产品放在“ AuctionForm”组件内的选择标签上，如下所示：
拍卖表格
<div class="row">
<label for="product">Produto</label>
<select name="product" onchange={{action 'selectProduct' value='target.value'}}>
<option value="" selected='selected' disabled='disabled'>-------</option>
{{#each @products as |product|}}
<option value="{{product.id}}" selected={{if (equalstr product.id @auction.product.id) 'selected'}}>{{product.name}}</option>
{{/each}}
</select>
</div>
我想在类的“ selectProduct”操作上绑定这两个对象：
拍卖form.js
import Component from '@glimmer/component';
import { action } from '@ember/object';
export default class AuctionFormComponent extends Component {
@action selectProduct(product) {
this.get('auction').set('product', product); // this doesn't work on ember newest version
}
@action save(auction) {
auction.save();
}
}
虽然，每当我尝试通过“ this.get（）”函数在组件类上访问其值时（就像我以前在余烬版本中所做的那样），我都会收到一条错误消息，指出“ this.get不是函数” 。
在网络上大量研究之后，我找不到直接的解决方案，也没有文档提供的官方解决方案。
我最接近解决方案的是将“拍卖”声明为计算属性（https://api.emberjs.com/ember/3.22/classes/Component）。但是，一旦它的结构（如下面的代码）仅适用于TypeScript文件，就无法在javascript文件上实现它。
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { computed } from '@ember/object';
export default class AuctionFormComponent extends Component {
auction: computed('auction', function() {
return this.auction;
}
@action selectProduct(product) {
debugger;
this.get('auction').set('product', product);
}
@action save(auction) {
auction.save();
}
}
有谁知道在ember 3.22中执行此类任务的正确方法？
非常感谢你。
由于您使用的是最新的Glimmer组件（从中导入@glimmer/component），
必须通过js类中的args属性访问参数，例如this.args.auction。
参数（auction和products）在组件内部不可更改。要更改参数的值，我们可以向父级发送操作以更改值。
该get和set方法不是在微光组件可用。这些方法是经典余烬组件的一部分。您可以使用点[。]表示法访问类的属性，例如：，this.auction并使用赋值语句像this.property = 'value'
由于您使用的是本机类语法，action: computed(..)因此不是有效的声明。
要绑定事件，建议使用on修饰符和fn助手
通过结合所有观点，
import Component from '@glimmer/component';
import { action } from '@ember/object';
export default class AuctionFormComponent extends Component {
@action
selectProduct(event) {
// This `updateProduct` has to be implemented in parent class
// which mutates the `auction` object.
this.args.updateProduct(event.target.value); // -> `on` modifier will capture the native event
}
@action
save(auction) {
auction.save();
}
}
<div class="row">
<label for="product">Produto</label>
<select name="product" {{on "change" this.selectProduct}}>
<option value="" selected='selected' disabled='disabled'>-------</option>
{{#each @products as |product|}}
<option value="{{product.id}}" selected={{if (equalstr product.id @auction.product.id) 'selected'}}>{{product.name}}</option>
{{/each}}
</select>
</div>
调用就像
<AuctionForm
@auction={{@model.auction}}
@products={{@model.products}}
@updateProduct={{this.updateProduct}}
/>
在这里，updateProduct需要正确实施以更新产品。
编辑：正如@BPorto在评论中提到的那样，将Ember辛烷值迁移备忘单从经典的余烬模型迁移到Octane模型时将非常方便。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句