Basically I have a model, which has a one-to-many relationship, which contains comments. Each comment has a start and an end position. In order to display the comments, I need to assign rows to them, so that they never overlap.
Previously I have been doing this by using an observer which triggers on all the properties that could change:
assignCommentRow: observer('model.comments.@each.{start,end}', 'model.comments.length', function() {
...
}
This has been working for the last years, but moving to octane (and reading the linter warnings), this feels more and more wrong.
I was trying to wrap my head around trying to trigger assigning of the comment rows at all those places where changes are made, that make a re-computation necessary, however that would be quite a few places (as these things could change on incoming messages through a web socket as well).
There are GitHub - tracked-tools/tracked-built-ins: Tracked versions of JavaScript's built-in classes, but having to wrap the array and the objects in tracked equivalents seems pretty excessive.
Which way to go? The models currently are Ember data models. However, it might be that I need to display 20 models on the same page, which could have 20-50 comments each (which are drawn on a canvas) - so performance easily can be an issue (especially on cheaper mobile devices).
Oh - and I just found out that there is pretty much no way to use an observer with a native class - both this.addObserver and the @observes decorator require an ember object. what to do… what to do?