Aurelia 中基于范围的参考答案

【问题标题】：scope based ref in AureliaAurelia 中基于范围的参考
【发布时间】：2017-07-22 01:43:12
【问题描述】：

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

<form ref="domRef" ...>

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

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

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

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

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

为什么不同作用域的 domRef 没有区别？

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

更新在阿什利的回答之后：

自定义元素表单有自己的虚拟机，自定义元素字段也有自己的虚拟机。

观看次数：

    <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，为什么会发生呢？

【问题讨论】：

标签： aurelia aurelia-templating

【解决方案1】：

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

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

【讨论】：

【解决方案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
     }
    }

奇怪但有效。

【讨论】：