javascript - 围绕组合绑定(bind)创建包装器并绑定(bind)到组合 View 模型

Question

我正在寻找使用 aurelia 创建一个仪表板，它具有一个插件类型框架来向该仪表板添加新的小部件。我想包装这些小部件，以便可以显示小部件控制之外的标题和信息，所以我想要类似的东西:

<widget-wrapper widget-name="sales"></widget-wrapper>

小部件包装器看起来像

<template>
  <h3>${widget.title}</h3>

  <compose view-model.bind="widgetName"></compose>

  <span>${someOtherInfo}</span>
</template>

然后，销售小部件的作者只需要一个显示主要数据的 View 和一个定义标题属性的 View 模型，然后执行所需的任何操作来显示销售数据。

我认为此处不能使用撰写绑定(bind) - 因为我无法绑定(bind)到标题。

我知道我可以为撰写绑定(bind)指定一个 View ，但这也没有帮助，因为我确实想使用默认值。

我读到了有关模板部件的信息，但似乎这对于我的需求来说是错误的方向 - 这里的小部件包装器将定义应该替换的内容，并且可替换的部件需要位于销售小部件中。当我尝试获取小部件的标题时，我仍然会陷入困境。

是否有一些我错过的 aurelia 模板功能可以支持这种情况？

Answer 1

您可以绑定(bind)到 compose 元素的当前 View 模型。

这是一个示例:https://gist.run?id=c28ed9f1e893cc3efd5a

app.html

<template>
  <require from="./widget-wrapper"></require>

  <widget-wrapper module-name="foo"></widget-wrapper>
</template>

app.js

export class App {
}

foo.html

<template>
  ${message}
</template>

foo.js

export class Foo {
  name = 'my name is foo';
  message = 'hello world!';
}

widget-wrapper.html

<template>
  <h1>${composeViewModel.currentViewModel.name}</h1>
  <compose view-model.ref="composeViewModel" view-model.bind="moduleName"></compose>
</template>

widget-wrapper.js

import {bindable} from 'aurelia-framework';

export class WidgetWrapper {
  @bindable moduleName;

  bind() {
    console.log(this.composeController);
  }
}