子容器中的 Aurelia ref 属性

Question

我有一个 parent 组件，其中视图模型包含属性 prop1。在它看来，一个自定义元素有一个 view-model.ref="prop1".

export class Parent {
  public prop1;
}

<template>
  <custom-element view-model.ref="prop1"></custom-element>
</template>

这很有用，我在 parent.

中获得了对自定义元素视图模型的引用

现在，我使用 child 组件将子路由器添加到 parent。在 child 的视图模型中，我添加了一个属性 prop1。在它看来，自定义元素有一个 view-model.ref="prop1"。就像我在 parent...

中所做的一样

我一导航到 parent/child，parent 的容器 prop1 就停止引用 parent 的自定义元素并开始引用来自 child。如果我以不同的方式命名属性，则没有问题。

知道为什么会这样吗？我怎样才能在不担心属性命名的情况下避免这种行为？

编辑我偶然发现了更多信息！如果在视图模型中初始化属性，我似乎能够在视图模型中保留引用。请注意，我使用的是 Typescript，所以我认为未分配的 class 属性的编译代码在分配之前根本没有提到属性。我还是不太明白问题到底出在哪里...

如果我直接在模板中使用 view-model.ref 而没有将其映射到视图模型中的显式属性，我仍然会遇到同样的问题：

<template>
  <custom-element view-model.ref="custom"></custom-element>
  <custom-element2 opened.call="custom.opened()"></custom-element2>
</template>

Answer 1

当您在 class 中创建一个属性并且不为其分配任何内容时，babel/typescript 将删除属性就好像它甚至没有被声明一样.. 因为它真的什么也没做。 typescript 只对编译时的定义感兴趣。

现在 child 中的属性已发出，您在 child 中绑定了未声明的属性。在这种情况下，aurelia 为您创建一个属性并绑定到它..

但在你的情况下，aurelia 在 parent 范围内找到了这个属性（就像常规的 JS 范围规则一样），因此不要在 child 范围而是绑定到 parent 属性.

这就是为什么当您在 child 中初始化属性时（即使使用 undefined）它 "works"。因为您在 2 个范围内有 2 个属性。

当您更改名称时，aurelia 会为您创建一个新的属性.. 这是另一条规则 - wen aurelia 为你创建一个属性 - 它在可用的最低范围内创建它.. 在你的情况下 - child 范围。一切都恢复正常了。

你可以在 repeate.for 中注意到这种行为，因为转发器为每个 repeate 循环创建了一个不可见的范围。如果您将 repeate 中的任何内容绑定到不存在的属性，您将在每个 child 中拥有属性，而不是在 parent.[=14= 中拥有一次]

子容器中的 Aurelia ref 属性

Aurelia ref attribute in child container

containers

ref

aurelia