In AureliaJS, how to add/remove views from JS instead of markup?

Question

I have several views/components that implement custom elements, so I use them in my markup as follows:

  <require from="./panels/property_inspector/PropertyInspector"></require>
  <property-inspector--panel></property-inspector--panel>

So far so good. But now I need to add/remove these kind of views/components programmatically. I was reading the aurlia hub, but I wasn't successful... Any hint appreciated.

It really depends on what you are trying to accomplish exactly. Based on the very short question without any real example of what you are trying to do, maybe you want [compose](http://aurelia.io/hub.html#/doc/article/aurelia/templating/latest/templating-basics/4)? — peinearydevelopment, Sep 13 '16 at 18:04
try to use model to drive the view, instead of manual add/remove. Use if binding to add/remove dom, use show binding to toggle display: none/block. http://aurelia.io/hub.html#/doc/article/aurelia/templating/latest/templating-basics/8 — huocp, Sep 13 '16 at 23:25
We need more information about your specific task in order to recommend a solution. — Joseph Gabriel, Sep 14 '16 at 12:39

score 0 · Answer 1 · answered Sep 14 '16 at 13:08

Depending on what you are trying to accomplish, I agree with @peinarydevelopment that compose may be of use to you. See compose documentation

You can use a <compose> element and bind the view-model attribute to a property on your view model. This property should specify the path to the view model or an actual instance of a view model that has been imported.

Example:

app.html

<template>
  <h2>dynamic view model by path</h2>

  <button click.trigger="loadNewViewModel()">Load different vm</button>

  <compose view-model="${currentViewModel}"></compose>

</template>

app.js

export class App {

  currentViewModel = "test.js";

  loadNewViewModel(){
    this.currentViewModel = "new.js"
  }
}

See this gist: https://gist.run/?id=a2f17028d45ea202cd19be5491272dde

In AureliaJS, how to add/remove views from JS instead of markup?

1 Answers1