Question

我是Aurelia的新手并且正在学习如何正确使用双向数据绑定。

我正在处理的应用程序将由多个子应用程序组成，每个子应用程序都有自己的侧边栏链接（菜单）和内容。使用切换台或仪表板可以随时轻松更改应用程序。

我注意到我无法将if绑定到模型上的方法，因为该方法不会定期调用：

export class App {
    public getMenu() {
        return this.someService.currentApp !== null
            ? this.someService.currentApp.menu
            : [];
    }
}

<div if.bind="getMenu().length > 0"></div>

那里的代码很长，所以将它放在模板中是没有意义的。

但是，如果我将此代码转换为TS getter，那么一切都很有效：

export class App {
    get menu() {
        return this.someService.currentApp !== null
            ? this.someService.currentApp.menu
            : [];
    }
}

<div if.bind="menu.length > 0"></div>

但是，在我注意到这个工作之前，我也尝试过使用Event Aggregator。我在更改应用时触发了一个事件，并在App ViewModel上订阅了它：

export class App {
    public menu: AppMenuLink[];

    public constructor(ea: EventAggregator) {
        ea.subscribe('app:changed', (response) => {
            this.menu = response.app !== null ? response.app.menu : [];
        });
    }
}

<div if.bind="menu.length > 0"></div>

这个方法也很明显（很明显），但是如果从长远来看我滥用它太多，我觉得它可能会让我的代码对于事件订阅者来说太过臃肿。

所以，我的问题是：哪种方法更好（以及为什么），或者我完全错过了什么，并且做错了？在我的代码库变大之前，我想澄清一下。

另外（这可能应该是另一个问题），当我使用事件聚合器时，是否有办法让模板知道要显示的数据（当事件发生变化时）回调），而不是检查它是否改变了？我认为这可以阻止Aurelia完成无用的检查，看看房产是否已经改变。

Answer 1

为什么不创建一个getter并使用computedFrom装饰器来避免脏检查？

@computedFrom('someService.currentApp.menu.length')
get menuLength() {
  return this.someService.currentApp !== null
    ? this.someService.currentApp.menu.length
    : 0;
}

你必须测试它，看它是否有效。如果确实如此，太棒了！如果没有，请告诉我，我会给出一些其他选择。

Aurelia事件聚合器VS双向数据绑定的getter方法

1 个答案: