javascript - Aurelia 中 View 模型之间的接口(interface)

Question

我在同一页面上有两个 View 。 View A 的 View 模型需要调用 View B 的 View 模型中的方法。 Aurelia 可能做到这一点吗？

此外，这是最好的方法吗？使用 EventAggregator (pub/sub) 在 View 模型之间进行通信会更好吗？

-----更多细节-----

更具体地说，我的 app.html 文件中使用了一个导航栏，如下所示:

<template>

    <require from="nav-bar-view"></require>

    <nav-bar-view></nav-bar-view>

    <router-view></router-view>

</template>

路由器 View 中的 View 模型需要能够更改导航栏的标题和按钮文本。

我最初的设计是使用发布/订阅来传达对导航栏 View 模型的更改。由于这看起来有点困惑和过于复杂，我想想出一种更简单的方法。

我的最新想法是创建一个单例 NavBar 类，将其注入(inject)到 NavBarView 类和“消费者” View 模型中。

以下是代码的简化版本:

nav-bar-view.html:

<template>
    <div class="center">${navBar.title}</div>
</template>

nav-bar-view.js:

import {inject} from 'aurelia-framework';
import {NavBar} from 'nav-bar';

@inject(NavBar)
export class NavBarView {
    constructor(navBar) {
        this.navBar = navBar;
    }
}

nav-bar.js:

import {singleton} from 'aurelia-framework';

@singleton()
export class NavBar {
    constructor() {
        this.title = '';
    }
}

view.js(导航栏的使用者):

import {inject} from 'aurelia-framework';
import {NavBar} from 'nav-bar';

@inject(NavBar)
export class View {
    constructor(navBar) {
        this.navBar = navBar;
    }

    attached() {
        this.navBar.title = 'This View's Title';
    }
}

同样，这比实际代码简单得多，但它可以说明这个想法。

我已经尝试过，效果很好。这有道理吗？有更好的办法吗？

Answer 1

pub/sub 可以，但我怀疑您正在寻找比这更有针对性的东西。

将某些内容传递到自定义元素的首选方法是通过可绑定(bind)属性。假设您有 component-a 和 component-b 并且 A 需要调用 B 的 View 模型上的方法。您可以执行以下操作:

1. 获取对 B View 模型的引用，以便我们可以绑定(bind)到它的属性和方法:

<component-b view-model.ref="b"></component-b>

向组件 A 添加可绑定(bind)属性，以便我们可以为组件 A 提供对 B 方法的引用。

import {bindable} from 'aurelia-framework';

export class ComponentA {
  @bindable sayHello;
}

将组件 A 的 sayHello 属性绑定(bind)到 B 的 sayHello 方法。

<component-a say-hello.call="b.sayHello()"></component-a>

这是一个可运行的示例:https://gist.run/?id=91269472d4e6509e32123ca2a63dd9ca

编辑

根据问题中的更新信息，我建议如下:

1。创建一个包含导航栏状态的类

export class NavState {
  title = 'some default title';
}

2。依赖于导航栏组件中的 NavState

@inject(NavState)
export class NavBar {
  constructor(state) {
    this.state = state; // now you can bind to "state.title" in nav-bar.html
  }
  ...
}

3。在需要更改标题的组件中获取对 NavState 的依赖。

@inject(NavState)
export class MyComponentThatChangesTheTitle {
  constructor(state) {
    this.state.title = 'something else';
  }
  ...
}

这比将组件的 View 模型作为状态传递更灵活。例如，使用此模型，您甚至可以在实例化导航栏之前配置标题。