组合bindable时出错：未处理的promise promise TypeError：无法读取属性＆＃39; router＆＃39;为null

Question

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

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

与

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

在骨架导航的app.html中

这不再适用了。 未处理的承诺拒绝TypeError：无法读取属性＆＃39; router＆＃39;为null

事实上，我的所有作品都没有使用升级后的aurelia。目前是否存在撰写问题？

Answer 1

导航栏有一个router属性，装饰着@bindable装饰器。使用compose无法将导航栏自定义元素的路由器属性绑定到app view-model的路由器属性。

通常，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>

您也可以删除nav-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不再合作......