Aurelia在ViewModel上設置元素

如何從ViewModel向View添加組件。例如，我有以下內容：Aurelia在ViewModel上設置元素

我有一個服務注入組件。然後從組件I獲取數據，當我得到響應時，我將data屬性設置爲獲取的數據。在此之後，我想將組件加載到視圖中，並將獲取的數據視爲可綁定的。

this.service.get() 
.then(response => response.json()) 
.then(data =>{ 
    this.data = data.results 
    //Mount element to View here: <component data.bind="data"></component> 
})

林問這個問題，因爲如果我設定的值時獲取並查看本：

<component data.bind="data"></component>

它通過一個空的對象。我曾嘗試使用canActivate和activate方法上的服務。

組件：

export class Component{ 
    @bindable data 
    bind(){ 
     console.log(this.data) 
    } 
}

來源

2016-05-02 Diego Gallegos

'component'看起來像什麼？ –

我更新了我的問題。如果我記錄數據，它是一個空數組。 –

據我所知，這不應該是一個問題。也許有些東西會破壞你的代碼。顯示您的Web組件和服務的完整代碼 –

我複製你的代碼中的要點，並運行它在這裏gist.run：https://gist.run/?id=04907ff8d8b6d8b4aee625669d8571a3

它運行如預期的我。我甚至更新了它以將數據設置在承諾中。

現在，如果你想通知當data屬性的變化，你需要實現一個功能，所以在這種情況下，所謂的${propertyName}Changed(newValue, oldValue)，dataChanged(newValue, oldValue)。我創建了一個單獨的要點來顯示如何更改您的代碼：https://gist.run/?id=34a01ca3f600470691d5b91c9131f33b

您會發現在我的代碼中我沒有使用newValue和oldValue參數。我這樣做的目的是讓你知道奧裏利亞仍然設置了房產價值。回調就在那裏讓你的代碼在屬性值改變時做些什麼。

來源

2016-05-03 02:47:29

太棒了！解決問題的方法是我回復我的諾言，就像你在激活時一樣。返回承諾有什麼不同而不是？我應該在什麼條件下將一個組件從ViewModel附加到DOM？ –

當您從'activate'返回承諾時，Aurelia會在繼續使用組件生活方式之前等待它解決。 –

「數據」字段被綁定到是使用您的組件，而不是在你的組件字段上的視圖模型的字段。

來源

2016-05-03 00:07:30

是的，我知道。那爲什麼在組件上它有** @可綁定的數據**。靜態數據被綁定到組件，但每當我在服務器上執行一次獲取，它都不會。除了問題是關於從視圖模型中安裝組件來查看。在這種情況下，。 –

@DiegoGallegos您可以使用show.bind =「isReadyToShow」從DOM中添加和刪除組件。 isReadyToShow將是ViewModel上的布爾屬性而不是組件。 –

Aurelia在ViewModel上設置元素

回答

相關問題