我应该在 Aurelia 生命周期的什么时候填充组件属性?
When in Aurelia lifecycle should I populate component properties?
我有一个 Aurelia 组件,其中包含一些 属性(项目列表),我想通过 API 调用对其进行初始化。该项目列表最终将显示在 select 元素中。虽然该列表是空的,但我可以显示一个空的 select(或禁用它)。
我的问题是,当在 component lifecycle should I populate the list of items? I've seen this 中提示 attached
时。但我在想,因为它并不真正依赖于附加或绑定的组件,所以我会在构造函数中进行。
优点、缺点和影响是什么?
component.js
@inject(WebApi)
export class MyComponent {
api = undefined;
items = undefined;
/**
* Creates the component
* @param api the web API
*/
constructor(api) {
this.api = api;
this.api.getItems().then(items => {
this.items = items;
});
}
}
component.html
<template>
<div>
<select value.two-way="selectedItem">
<option repeat.for="item of items" model.bind="item">${item.id}</option>
</select>
</div>
</template>
作为一般建议,我不会在构造函数中执行此操作。这适用于您正在编写的任何代码,无论是框架还是语言。构造函数应该完成设置对象所需的最少工作量,然后 return。当然,你在这里使用了一个承诺,所以构造函数仍然会很快完成,所以这里有一个论点说这是可以的。
话虽这么说...
您将使用的回调将取决于用例。对于路由器未加载的组件,您有三个选择:created
、bind
和 attached
。在您的用例中,您可以在加载数据之前禁用 select 元素,因此可以使用 attached
回调。我个人可能会把这个电话放在这里。
如果在数据绑定之前需要数据,我会使用 created
回调。如果要检索的数据需要通过数据绑定接收的参数,我会使用 bind
回调。
我有一个 Aurelia 组件,其中包含一些 属性(项目列表),我想通过 API 调用对其进行初始化。该项目列表最终将显示在 select 元素中。虽然该列表是空的,但我可以显示一个空的 select(或禁用它)。
我的问题是,当在 component lifecycle should I populate the list of items? I've seen this attached
时。但我在想,因为它并不真正依赖于附加或绑定的组件,所以我会在构造函数中进行。
优点、缺点和影响是什么?
component.js
@inject(WebApi)
export class MyComponent {
api = undefined;
items = undefined;
/**
* Creates the component
* @param api the web API
*/
constructor(api) {
this.api = api;
this.api.getItems().then(items => {
this.items = items;
});
}
}
component.html
<template>
<div>
<select value.two-way="selectedItem">
<option repeat.for="item of items" model.bind="item">${item.id}</option>
</select>
</div>
</template>
作为一般建议,我不会在构造函数中执行此操作。这适用于您正在编写的任何代码,无论是框架还是语言。构造函数应该完成设置对象所需的最少工作量,然后 return。当然,你在这里使用了一个承诺,所以构造函数仍然会很快完成,所以这里有一个论点说这是可以的。
话虽这么说...
您将使用的回调将取决于用例。对于路由器未加载的组件,您有三个选择:created
、bind
和 attached
。在您的用例中,您可以在加载数据之前禁用 select 元素,因此可以使用 attached
回调。我个人可能会把这个电话放在这里。
如果在数据绑定之前需要数据,我会使用 created
回调。如果要检索的数据需要通过数据绑定接收的参数,我会使用 bind
回调。