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 模型需要能够更改导航栏的标题和按钮文本。

我最初的设计是使用 pub/sub 将更改传达给导航栏 View 模型。由于这看起来有点困惑和过于复杂，我想提出一个更简单的方法。

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

以下是代码的简化版本:

导航栏 View .html:

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

导航栏view.js:

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

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

导航栏.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>

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

import {bindable} from 'aurelia-framework';

export class ComponentA {
  @bindable sayHello;
}

1. 将组件 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 模型作为状态传递更灵活。例如，使用此模型，您甚至可以在导航栏实例化之前配置标题。