Aurelia 中基于范围的引用

Question

我有表单的引用，它是一个自定义元素

<form ref="domRef" ...>

我也有 ref for field，这是另一个自定义元素（在表单中使用）

<input type="text" ref="domRef" .....>

但在表单视图模型的 attach() 中，我得到 this.domRef 是输入的引用。

attached(){        
     console.log(this.domRef);
}

因此，随着执行的进行，domRef 正在被最新的覆盖。为什么？

为什么不同范围的 domRef 没有区别？

我不能为 ref 使用不同的名称，因为所有名称都是动态生成的。如果有其他选择，请帮助我。

Update After Ashley's Answer:

自定义元素表单有自己的 VM，自定义元素字段也有自己的 VM。

观看次数：

    <template>
        <form ref="domRef">
                <compose view-model="resources/elements/field" ..... containerLess>
                </compose>
        </form>
    </template>
    <template>
        <input type="text" ref="domRef"></input>
    </template>

视图模型：

    export class Form{
     ..
     attached(){
      console.log(this.domRef); //returns Input's Ref Which is not correct
     }
    }
    export class Field{
     ..
     attached(){
      console.log(this.domRef); //returns Input's Ref Which is correct
     }
    }

那么如果 domRef 属于当前 VM 为什么会这样？

Answer 1

scope 是您的 VM，而不是任何 HTML 元素，因此 this.domRef 将被设置为 Aurelia 将属性设置为的最后一个元素。

如果名称是动态生成的，难道你不能直接更改名称生成代码吗？

Answer 2

在挖掘了一切之后，我得到了解决方案。即在构造时初始化domRef。

    export class Form{
     constructor(){
       this.domRef = null;
     }
     attached(){
      console.log(this.domRef); //returns Form's Ref Which is correct
     }
    }
    export class Field{
     constructor(){
       this.domRef = null;
     }
     attached(){
      console.log(this.domRef); //returns Input's Ref Which is correct
     }
    }

奇怪但有效。

Aurelia 中基于范围的引用

scope based ref in Aurelia

aurelia

aurelia-templating