[英]Change template dynamically from view-model (Aurelia)
Is it possible to change which html-template is being used dynamically from the view-model? 是否可以从视图模型中动态更改哪个html模板?
Eg based on data downloaded from a server, I'd like to choose different templates (or some other logic in the view-model) 例如,基于从服务器下载的数据,我想选择不同的模板(或视图模型中的一些其他逻辑)
Update Based on the answer below suggesting getViewStrategy
, here's a complete sample: 更新根据以下答案建议
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"
}
}
If you want to do this on a single view model implement the getViewStrategy function. 如果要在单个视图模型上执行此操作,请实现getViewStrategy函数。
export class MyView{
getViewStrategy(){
return 'my-other-view.html';
}
}
Refer to the documentation under App Configuration and Startup , titled Configuring the View Location Convention . 请参阅“ 应用程序配置和启动 ”下的文档,标题为“ 配置视图位置约定” 。 Here's and excerpt:
以下是摘录:
To do this, during bootstrap, import the
ViewLocator
and replace itsconvertOriginToViewUrl
method with your own implementation.为此,在引导期间,导入
ViewLocator
并将其convertOriginToViewUrl
方法替换为您自己的实现。
It includes a code example you may follow as well. 它包括您可能遵循的代码示例。
As an alternative, you could look into the aurelia-compiler
library module. 作为替代方案,您可以查看
aurelia-compiler
库模块。
NOTE : This library will be refactored and parts of it will be included into the core.
注意 :此库将被重构,其中的一部分将包含在核心中。 In the meantime it can still be used but please be aware of this breaking change.
与此同时,它仍然可以使用,但请注意这一重大变化。
It contains a function called swapView()
that looks like it may do what you want. 它包含一个名为
swapView()
的函数,看起来它可以做你想要的。 An example of it being used is in the aurelia-dialog
library module. 它的一个例子是在
aurelia-dialog
库模块中。 Hopefully you can glean some useful information from that and find a way to make it work. 希望您可以从中收集一些有用的信息,并找到一种方法使其工作。
Write a view-model that takes data from server and binding variables of class. 编写一个视图模型,从服务器和类的绑定变量中获取数据。
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;
}
}
Write the view as a whole, with show.bind, and bind those with view-model. 使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.