CODEWITHSUNDEEP
aurelia
Janus007
Janus007

Reputation: 366

Dynamic view creation

I'm trying to get a simple dynamic view working the simplest possible way.

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'm missing something, the view factory should be able to create a view and then it should be added to a viewslot?

What am I missing in the above code?

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

Upvotes: 3

Views: 1707

Answers (2)

Atul Chaudhary
Atul Chaudhary

Reputation: 3736

Late for an answer but this can be easily achieved by using getViewStartegy method provided by aurelia.

export class Test {

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

Upvotes: 1

Sylvain
Sylvain

Reputation: 19249

See the updated post by Rob in 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();
    }
}

Upvotes: 3

Related Questions