Can aurelia work for none html views


#1

Hello, after dwindling a bit in javascript I decided to start learning a framework. Now I realize that the application I have is not the “standard” application. Instead of rendering “html” I wish to actually render “to a canvas”.

Simplified example: I have a view model that has say a list of “points”, simple data that consist of {x, y, color, size}. Now the view is a “canvas” with a backing javascript renderer.

So instead of an “app.js -> app.html”, I have something that is like “app.js -> render.js”. Inside render.js I would have to provide the hooks & databinds to the viewmodel app.

Coming from c# I feel these has to be a straight forward way to do this. (In C# it’s quite convoluted, but still simple).

Is there something that works similar to this (ideally):

class renderer {
    constructor(data_context) {
        this.data_context = data_context;
        this.points: BindableList = [];
    }
}

r = renderer(app); //create a view
two_way_bind(r.points, "point_list"); 
//bind points to a variable named "point_list" inside the datacontext

Of course adding manual options to redraw the points on update and update the datacontext on modifications from the view is an option. But that is what I wish to prevent by using a MVVM (as it would mean the view, renderer.js, gains a strong knowledge of the viewmodel, app.js).

Is aurelia the right framework for this?

All tutorials seem to wish to defined the binding “in html”. While that would also be a “possibility” I’d then need to extend html with my own custom tags. (Exactly like xaml in c#). - I’d make a tag called <pointlist/> which is placed inside the <canvas/> tag. This <pointlist/> would have a pointlist.js backing to actually draw the points. (Or well, it would require another sub-tag which is the actual point).


#2

Aurelia works with svg just like html but the only way to render to a canvas is via JavaScript. You can still build your canvas code in components but you wont be able to bind them together by putting them inside the <canvas> element.

I would suggest using something like d3.js as it allows you to simply switch between svg and canvas which both have their pros and cons. Depending on what you’re trying to create, there are various libraries that make d3.js less complex to use for certain use cases.