Error composing bindable: Unhandled promise rejection TypeError: Cannot read property 'router' of null

Question

在上次更新 aurelia 框架之前，我曾经能够替换

<nav-bar router.bind="router"></nav-bar>

和

<compose view-model="./nav-bar" model.bind="router"></compose>

在骨架导航的 app.html 中

这不再有效了。未处理的承诺拒绝 TypeError：无法读取属性 'router' of null

事实上，我的 none compose 使用升级后的 aurelia。目前撰写有问题吗？

Answer 1

导航栏有一个用 @bindable 装饰器装饰的 router 属性。无法使用 compose 将导航栏自定义元素的路由器属性绑定到应用程序视图模型的路由器属性。

一般来说，compose和@bindable不是相关的特征。无法翻译：

<my-custom-element my-bindable-property.bind="foo"></my-custom-element>

为此：

<!-- no way to bind "my-bindable-property"... binding to "model" is not going to help -->
<compose view-model="./my-custom-element"></compose>

尝试将您的撰写更改为：

<compose view="./nav-bar.html"></compose>

您也可以删除导航-bar.js - 它不会被使用。

Answer 2

为了将对象传递给 compose 自定义元素，我必须像这样设置元素：

<compose view-model="./nav-bar" model.bind="router"></compose>

然后使用 activate 方法在模型中分配该对象：

export class NavBar {
  activate(router){
    this.router = router;
  }
}

正如 Jeremy 指出的那样，compose 和 @bindable 不再一起工作...

javascript