0

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

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

4

2 回答 2

2

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

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

于 2017-07-19T18:22:13.220 回答
0

挖掘完所有内容后，我得到了解决方案。即在构建时初始化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
     }
    }

奇怪但有效。

于 2017-07-21T17:43:12.143 回答