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).