Question

我希望使用aurelia创建一个仪表板，该仪表板具有一个插件类型框架，可以在此仪表板中添加新的小部件。我想要包装这些小部件，这样我就可以显示小部件控件之外的标题和信息，所以我喜欢这样的东西：

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

和widget-wrapper看起来像

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

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

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

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

我不认为这里可以使用撰写绑定 - 因为我无法绑定到标题。

我知道我可以为compose绑定指定一个视图，但这也没有帮助，因为我想使用默认值。

我读到了关于模板部件的信息，但似乎这是出于我的需求的错误方向 - 这里的widget-wrapper将定义应该替换的内容，并且可替换的部分需要在sales小部件中。在尝试获取小部件的标题时，我仍然会被卡住。

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

Answer 1

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

以下是一个例子：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);
  }
}

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

1 个答案: