從視圖模型動態更改模板（Aurelia）

Question

是否可以從視圖模型中動態更改哪個html模板？

例如，基於從服務器下載的數據，我想選擇不同的模板（或視圖模型中的一些其他邏輯）

更新根據以下答案建議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"
  }
}

Answer 1

如果要在單個視圖模型上執行此操作，請實現getViewStrategy函數。

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

Answer 2

請參閱“ 應用程序配置和啟動 ”下的文檔，標題為“ 配置視圖位置約定” 。 以下是摘錄：

為此，在引導期間，導入ViewLocator並將其convertOriginToViewUrl方法替換為您自己的實現。

它包括您可能遵循的代碼示例。

---

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

注意 ：此庫將被重構，其中的一部分將包含在核心中。 與此同時，它仍然可以使用，但請注意這一重大變化。

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

Answer 3

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

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將視圖作為一個整體編寫，並使用view-model綁定它們。

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