從視圖模型（奧裏利亞）動態地改變模板

是否有可能改變它的HTML模板被動態地從視圖模型中使用？從視圖模型（奧裏利亞）動態地改變模板

E.g.基於從服務器下載數據，我想選擇不同的模板（或視圖模型其它一些邏輯）

更新基礎上回答以下提示getViewStrategy，這裏有一個完整的示例：

export class MultiView { 
    gender : string 

    getViewStrategy() { 
     if(this.gender == 'boy') 
      return './multi-view-blue.html' 
     else 
      return './multi-view-pink.html' 
    } 

    // when view is made visible (e.g. by using the router) 
    activate() { 
     this.gender = Math.random()>0.5 ? "boy" : "girl" 
    } 
}

來源

2016-03-09 specimen

如果你想這樣做，在一個單一視圖模型實現getViewStrategy功能。

export class MyView{ 
    getViewStrategy(){ 
     return 'my-other-view.html';   
    } 
}

來源

2016-03-09 22:05:45 JamesCarters

這就是我一直在尋找，以前也見過，但不可能google一下。 – specimen

請參閱App Configuration and Startup下的文檔，標題爲配置查看位置約定。下面是摘錄和：

要做到這一點，引導期間，進口ViewLocator並用自己的實現來替代其convertOriginToViewUrl方法。

它包括你可能跟隨以及一個代碼示例。

作爲替代，您可以查看aurelia-compiler庫模塊。

注意：該庫將被重構和它的一部分將被納入到核心。在此期間它仍然可以使用，但請注意這一突破性變化。

它包含一個名爲swapView()的函數，它看起來像它可以做你想做的。正在使用的一個示例是aurelia-dialog庫模塊。希望你可以從中收集一些有用的信息，並找到一種方法使其工作。

來源

2016-03-09 20:58:03 Brett

謝謝，但我一直在尋找一些基於單一視圖的東西，比如'getViewStrategy（）'。儘管你的答案提供了有用的見解 – specimen

編寫一個從類的服務器和綁定變量中獲取數據的視圖模型。

export class MyClass{ 
    constructor(){ 
     this.red = false; 
     this.green = false; 
     this.yellow = false; 
     this.serverValue = ""; 
    } 
    activate(){ 
    return this.bindingFunction(); 
    } 
    bindingFunction(){ 
     if(this.serverValue == 'red') { this.red = true; } 
     else if(this.serverValue == 'green') { this.green = true; } 
     else this.yellow = true; 
    } 
}

用show.bind書寫整個視圖，並將其與視圖模型綁定。

<template> 
     <div show.bind='red'> /* your elements */ </div> 
     <div show.bind='green'> /* your elements */ </div> 
     <div show.bind='yellow'> /* your elements */ </div> 
</template>

來源

2016-03-10 08:02:59 user5246190

這是一個可能的解決方案，如果一個人不希望與其他視圖（只是部分），以取代整個視圖，按我的理解。我想視圖使用基於邏輯不同的HTML文件，所以'getViewStrategy（）'的伎倆。 – specimen

從視圖模型（奧裏利亞）動態地改變模板

回答

相關問題