Aurelia 使用 ES5 计算属性
Aurelia computed properties with ES5
我正在学习 Aurelia 教程,但有意只使用 ES5 和 AMD/RequireJS,因为最初我试图减少我可能需要在我当前的生产应用程序中引入的技术过载(目前是使用 Angular 但我正在考虑换成 Aurelia 而不是 Angular 2) 但我仍然无法让计算属性正常工作。
我注意到 update made in April 从 Object 原型中删除了计算函数,它允许使用以下语法,但我不确定我应该做什么来代替以下语法:
Welcome.computed({
fullName : function() { return this.firstName + " " + this.lastName; }
});
我可以用下面的方法达到同样的效果,但考虑到所达到的效果,它看起来很冗长!有没有正确的Aurelia方法?
Object.defineProperty(
Welcome.prototype,
"fullName",
{
get: function() { return this.firstName + " " + this.lastName },
enumerable: true
});
您所做的是正确的 - 您总是可以重新添加计算工厂方法,因为编写所有这些额外的 ES5 代码可能会变得乏味。
我还建议指定计算 属性 的依赖项以优化数据绑定效率。以下代码片段是等效的:
ES5:
function fullName() { return this.firstName + ' ' + this.lastName }
fullName.dependencies = ['firstName', 'lastName'];
Object.defineProperty(
Welcome.prototype,
'fullName',
{
get: fullName,
enumerable: true
});
ES6/ES7:
@computedFrom('firstName', 'lastName')
get fullName() {
return `${this.firstName} ${this.lastName}`;
}
我正在学习 Aurelia 教程,但有意只使用 ES5 和 AMD/RequireJS,因为最初我试图减少我可能需要在我当前的生产应用程序中引入的技术过载(目前是使用 Angular 但我正在考虑换成 Aurelia 而不是 Angular 2) 但我仍然无法让计算属性正常工作。
我注意到 update made in April 从 Object 原型中删除了计算函数,它允许使用以下语法,但我不确定我应该做什么来代替以下语法:
Welcome.computed({
fullName : function() { return this.firstName + " " + this.lastName; }
});
我可以用下面的方法达到同样的效果,但考虑到所达到的效果,它看起来很冗长!有没有正确的Aurelia方法?
Object.defineProperty(
Welcome.prototype,
"fullName",
{
get: function() { return this.firstName + " " + this.lastName },
enumerable: true
});
您所做的是正确的 - 您总是可以重新添加计算工厂方法,因为编写所有这些额外的 ES5 代码可能会变得乏味。
我还建议指定计算 属性 的依赖项以优化数据绑定效率。以下代码片段是等效的:
ES5:
function fullName() { return this.firstName + ' ' + this.lastName }
fullName.dependencies = ['firstName', 'lastName'];
Object.defineProperty(
Welcome.prototype,
'fullName',
{
get: fullName,
enumerable: true
});
ES6/ES7:
@computedFrom('firstName', 'lastName')
get fullName() {
return `${this.firstName} ${this.lastName}`;
}