Creating a dynamic view

Question

Creating a dynamic view

I am trying to make a simple dynamic view in the simplest way possible.

import {inject, noView, ViewCompiler, ViewSlot} from 'aurelia-framework';

@noView
@inject(ViewCompiler, ViewSlot)
export class ButtonVM{

    constructor(vc, vs){

        this.viewCompiler = vc;
        this.viewSlot = vs;


        var viewFactory =  this.viewCompiler.compile('<button>Some button</button>');

but apparantly I am missing something, the factory view should be able to create the view and then it should be added to the viewport?

What am I missing in the above code?

I should mention that I tried to follow Rob's comments on this thread: https://github.com/aurelia/templating/issues/35

+3

aurelia

Janus007 Jul 20. At 22:36

source to share

2 answers

Sylvain · Answer 1 · 2015-07-23T03:47:35+0000

See Rob's updated post on the same thread .

import {inject, noView, ViewCompiler, ViewSlot, Container, ViewResources} from 'aurelia-framework';

@noView
@inject(ViewCompiler, ViewSlot, Container, ViewResources)
export class Test {
    constructor(vc, vs, container, resources){
        this.viewCompiler = vc;
        this.viewSlot = vs;

        var viewFactory =  this.viewCompiler.compile('<button>${title}</button>', resources);
        var bindingContext = { title:'Click Me'};
        var view = viewFactory.create(container, bindingContext);
        this.viewSlot.add(view);
        this.viewSlot.attached();
    }
}

Atul chaudhary · Answer 2 · 2016-07-20T03:11:23+0000

See later for an answer, but this can be easily achieved with the getViewStartegy method provided by aurelia.

export class Test {

 constructor(vc, vs, container, resources){
 }
 getViewStrategy() {
    return new InlineViewStrategy('<button>${title}</button>');
 }
}

Creating a dynamic view

More articles: