Question

是否可以从视图模型中动态更改哪个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"
  }
}

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>

从视图模型动态更改模板（Aurelia）

3 个答案: