Question

我有一个自定义元素的表单

##Locales
locales=fr_FR

#
# Specify the locales that are enabled by default
#
locales.enabled=fr_FR

#
# This sets the default locale of the portal, overriding the properties
# "user.language" and "user.country" specified in system.properties.
#
company.default.locale=fr_FR
locale.default.request=false

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

<form ref="domRef" ...>

但是在form的视图模型的attach（）中我得到this.domRef是输入的引用。

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

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

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

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

更新在Ashley的回答之后：

Custom Element Form有自己的VM，Custom Element Field也有自己的VM。

查看：

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

查看-型号：

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

然后，如果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

2 个答案: