从视图模型（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

请参阅App Configuration and Startup 下的文档，标题为配置查看位置约定。以下是摘录：

为此，在引导过程中，导入 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>