2017-07-19 103 views
0

我有REF爲形式,其是自定義元件範圍基於REF

<form ref="domRef" ...> 

我有裁判用於現場太,這是另一個定製元素(被表單內使用)

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

但窗體的視圖模型裏面attach()我得到this.domRef是輸入的參考。

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

因此,隨着執行的進行domRef被最新的覆蓋。爲什麼?

爲什麼domRef對於不同的範圍沒有不同?

我不能爲ref使用不同的名稱,因爲所有的都是動態生成的。 如果有其他選擇,請幫我解決。

更新 後Ashley的答案:

定義元素形態都有其自己的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爲什麼會發生?

回答

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 
    } 
    } 

奇怪,但工作。

2

scope是您的VM,不是任何HTML元素,因此this.domRef將被設置爲Aurelia將該屬性設置爲的最後一個元素。

如果名稱是動態生成的,難道你只是改變了名稱生成代碼嗎?