Изменение шаблона динамически из view-model (Aurelia)

Question

Можно ли изменить, какой html-шаблон используется динамически из модели представления?

E.g. на основе данных, загруженных с сервера, я хотел бы, чтобы выбрать различные шаблоны (или какой-либо другой логики в представлении-модели)

Update Основываясь на ответ ниже предлагая 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.

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