Final changes

src/abstract/DomainViews.ts

@@ -1,13 +1,13 @@
 import { includes } from 'underscore';
 import Backbone from 'backbone';
 import View from './View';
+import Collection from './Collection';
 import Model from './Model';
-/*interface DomainView<TView, TModel>{
-  constructor(model: TModel): TView
-}*/
-type TModel<TCollection> = TCollection extends Backbone.Collection<infer TModel>? TModel: Model;
 
-export default abstract class DomainViews<TCollection extends Backbone.Collection<Model>, TItemView extends View> extends View<TModel<TCollection>> {
+export default abstract class DomainViews<
+  TCollection extends Collection,
+  TItemView extends View
+> extends View<TCollection> {
   // Defines the View per type
   itemsView = '';
 
@@ -26,7 +26,7 @@ export default abstract class DomainViews<TCollection extends Backbone.Collectio
    * @param {Model} model
    * @private
    * */
-  private addTo(model: TModel<TCollection>) {
+  private addTo(model: Model) {
     this.add(model);
   }
 
@@ -35,7 +35,7 @@ export default abstract class DomainViews<TCollection extends Backbone.Collectio
     const warn = `${ns ? `[${ns}]: ` : ''}'${type}' type not found`;
     em?.logWarning(warn);*/
   }
-  protected abstract renderView(model: TModel<TCollection>, itemType: string): TItemView;
+  protected abstract renderView(model: Model, itemType: string): TItemView;
 
   /**
    * Render new model inside the view
@@ -43,7 +43,7 @@ export default abstract class DomainViews<TCollection extends Backbone.Collectio
    * @param {Object} fragment Fragment collection
    * @private
    * */
-  private add(model: TModel<TCollection>, fragment?: DocumentFragment) {
+  private add(model: Model, fragment?: DocumentFragment) {
     const { reuseView, viewCollection, itemsView = {} } = this;
     var frag = fragment || null;
     var typeField = model.get(this.itemType);
@@ -69,10 +69,7 @@ export default abstract class DomainViews<TCollection extends Backbone.Collectio
     this.clearItems();
     this.$el.empty();
 
-    if (this.collection.length)
-      this.collection.each((model) => {
-        this.add(model, frag);
-      }, this);
+    if (this.collection.length) this.collection.each(model => this.add(model, frag));
 
     this.$el.append(frag);
     this.onRender();

src/abstract/View.ts

@@ -10,6 +10,8 @@ type Module<TItem extends Model | Collection> = TItem extends Collection<infer M
   ? M
   : unknown;
 
+type TCollection<TItem extends Model | Collection> = TItem extends Collection ? TItem : unknown;
+
 export default class View<
   TModel extends Model | Collection = Model,
   TElement extends Element = HTMLElement
@@ -22,7 +24,7 @@ export default class View<
     return this.em.config.stylePrefix || '';
   }
 
-  collection!: TModel extends Collection ? TModel : Collection<Model>;
+  collection!: TModel extends Model ? Collection<Model> : TModel;
 
   protected get module(): Module<TModel> {
     return (this.model as any)?.module ?? this.collection.module;

src/canvas/model/Frames.ts

@@ -1,6 +1,6 @@
 import { bindAll } from 'underscore';
 import CanvasModule from '..';
-import { Collection } from '../../common';
+import { Collection } from '../../abstract';
 import Page from '../../pages/model/Page';
 import Frame from './Frame';
 
@@ -8,10 +8,10 @@ export default class Frames extends Collection<Frame> {
   loadedItems = 0;
   itemsToLoad = 0;
   page?: Page;
-  module: CanvasModule
+  module: CanvasModule;
 
   constructor(module: CanvasModule, models: Frame[] = []) {
-    super(models);
+    super(module, models, Frame);
     this.module = module;
     bindAll(this, 'itemLoaded');
     this.on('reset', this.onReset);
@@ -20,7 +20,7 @@ export default class Frames extends Collection<Frame> {
 
   onReset(m: Frame, opts?: { previousModels?: Frame[] }) {
     const prev = opts?.previousModels || [];
-    prev.map((p) => this.onRemove(p));
+    prev.map(p => this.onRemove(p));
   }
 
   onRemove(removed?: Frame) {
@@ -43,6 +43,6 @@ export default class Frames extends Collection<Frame> {
   }
 
   listenToLoadItems(on: boolean) {
-    this.forEach((item) => item[on ? 'on' : 'off']('loaded', this.itemLoaded));
+    this.forEach(item => item[on ? 'on' : 'off']('loaded', this.itemLoaded));
   }
 }