从视图模型（奥里利亚）动态地改变模板

是否有可能改变它的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

从视图模型（奥里利亚）动态地改变模板

回答

相关问题