围绕组合绑定创建包装器并绑定到组合视图模型

Question

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

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

和widget-wrapper看起来像

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

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

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

那么销售小部件的作者只需要一个显示主要数据的视图和一个定义标题的视图模型属性然后做任何需要的事情来显示销售数据。

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

我知道我可以为撰写绑定指定一个视图，但这也无济于事，因为我确实想使用默认值。

我阅读了有关模板部件的信息，但这似乎不符合我的需求 - widget-wrapper 此处将定义应替换的内容，并且可替换部件需要位于销售小部件中。而且我在尝试获取小部件的标题时仍然会被卡住。

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

Answer 1

您可以绑定到 compose 元素的当前视图模型。

举个例子：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!';
}

小部件-wrapper.html

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

小部件-wrapper.js

import {bindable} from 'aurelia-framework';

export class WidgetWrapper {
  @bindable moduleName;

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

围绕组合绑定创建包装器并绑定到组合视图模型

Creating a wrapper around a compose binding and bind to the composed view model

javascript

aurelia