Views and Template Rendering

/**
 * Enhanced Backbone view with template rendering and region management
 * @param options - Configuration options for the view
 */
class View extends Backbone.View {
  constructor(options?: ViewOptions): View;
  
  /** Render the view using its template and attach to DOM */
  render(): this;
  
  /** Destroy the view and clean up all resources */
  destroy(options?: DestroyOptions): this;
  
  /** Check if the view has been destroyed */
  isDestroyed(): boolean;
  
  /** Check if the view has been rendered */
  isRendered(): boolean;
  
  /** Check if the view is attached to the DOM */
  isAttached(): boolean;
  
  /** Set the view's DOM element */
  setElement(element: string | Element): this;
  
  /** Bind UI elements defined in the ui hash */
  bindUIElements(): void;
  
  /** Unbind UI elements */
  unbindUIElements(): void;
  
  /** Get a UI element by name */
  getUI(name: string): JQuery;
  
  /** Delegate DOM events */
  delegateEvents(events?: EventsHash): this;
  
  /** Undelegate DOM events */
  undelegateEvents(): this;
  
  /** Delegate model and collection events */
  delegateEntityEvents(): void;
  
  /** Undelegate model and collection events */
  undelegateEntityEvents(): void;
}

interface ViewOptions {
  /** Hash of behavior definitions to apply to the view */
  behaviors?: BehaviorHash;
  
  /** Template function or selector string */
  template?: TemplateFunction | string;
  
  /** Context data for template rendering */
  templateContext?: object | (() => object);
  
  /** Hash of UI element selectors */
  ui?: UIHash;
  
  /** Hash of DOM event handlers */
  events?: EventsHash;
  
  /** Hash of event triggers that fire custom events */
  triggers?: TriggersHash;
  
  /** Hash of region definitions */
  regions?: RegionsHash;
  
  /** Hash of model event handlers */
  modelEvents?: EventsHash;
  
  /** Hash of collection event handlers */
  collectionEvents?: EventsHash;
  
  /** Prefix for child view events */
  childViewEventPrefix?: string;
  
  /** Hash of child view event handlers */
  childViewEvents?: EventsHash;
  
  /** Hash of child view triggers */
  childViewTriggers?: TriggersHash;
  
  /** Default region class to use */
  regionClass?: typeof Region;
}

import { View } from "backbone.marionette";

// Basic view with template
class BasicView extends View {
  template() {
    return '<h1>Hello <%= name %>!</h1>';
  }
}

// View with UI bindings and events
class InteractiveView extends View {
  template() {
    return `
      <h1>Interactive View</h1>
      <button class="js-click-me">Click Me</button>
      <input class="js-text-input" type="text" placeholder="Type here">
    `;
  }
  
  ui() {
    return {
      button: '.js-click-me',
      input: '.js-text-input'
    };
  }
  
  events() {
    return {
      'click @ui.button': 'onButtonClick',
      'input @ui.input': 'onTextInput'
    };
  }
  
  onButtonClick() {
    console.log('Button clicked!');
  }
  
  onTextInput(event) {
    console.log('Input value:', event.target.value);
  }
}

// Using the view
const view = new InteractiveView();
document.body.appendChild(view.render().el);

/**
 * Get the template function for rendering
 * @returns Template function or null
 */
getTemplate(): TemplateFunction | null;

/**
 * Mix template context with serialized data
 * @param serializedData - Data from serializeData()
 * @returns Combined data object for template
 */
mixinTemplateContext(serializedData: object): object;

/**
 * Serialize view data for template rendering
 * @returns Serialized data object
 */
serializeData(): object;

/**
 * Serialize model data for template rendering
 * @returns Model attributes or empty object
 */
serializeModel(): object;

/**
 * Serialize collection data for template rendering
 * @returns Collection models array or empty array
 */
serializeCollection(): object[];

/**
 * Attach HTML content to the view's element
 * @param html - HTML string to attach
 */
attachElContent(html: string): void;

/**
 * Add a region to the view
 * @param name - Region name
 * @param definition - Region definition or selector
 */
addRegion(name: string, definition: string | RegionDefinition): Region;

/**
 * Add multiple regions to the view
 * @param regions - Hash of region definitions
 */
addRegions(regions: RegionsHash): this;

/**
 * Remove a region from the view
 * @param name - Region name to remove
 */
removeRegion(name: string): Region;

/**
 * Remove all regions from the view
 */
removeRegions(): this;

/**
 * Empty all regions in the view
 */
emptyRegions(): this;

/**
 * Check if a region exists
 * @param name - Region name to check
 */
hasRegion(name: string): boolean;

/**
 * Get a region by name
 * @param name - Region name
 */
getRegion(name: string): Region;

/**
 * Get all regions as an object
 */
getRegions(): { [name: string]: Region };

/**
 * Show a view in a specific region
 * @param name - Region name
 * @param view - View to show
 * @param options - Show options
 */
showChildView(name: string, view: View, options?: ShowOptions): this;

/**
 * Detach a view from a specific region
 * @param name - Region name
 */
detachChildView(name: string): View | undefined;

/**
 * Get the current view from a specific region
 * @param name - Region name
 */
getChildView(name: string): View | undefined;

/**
 * Bind UI elements defined in the ui hash to this.ui
 */
bindUIElements(): void;

/**
 * Unbind UI elements from this.ui
 */
unbindUIElements(): void;

/**
 * Get a UI element by name
 * @param name - UI element name from ui hash
 * @returns jQuery object for the UI element
 */
getUI(name: string): JQuery;

// View with regions and child views
class LayoutView extends View {
  template() {
    return `
      <header id="header-region"></header>
      <main id="content-region"></main>
      <footer id="footer-region"></footer>
    `;
  }
  
  regions() {
    return {
      header: '#header-region',
      content: '#content-region',
      footer: '#footer-region'
    };
  }
  
  onRender() {
    // Show views in regions after render
    this.showChildView('header', new HeaderView());
    this.showChildView('content', new ContentView());
    this.showChildView('footer', new FooterView());
  }
}

// Using templateContext
class DataView extends View {
  template() {
    return '<h1><%= greeting %> <%= model.name %>!</h1>';
  }
  
  templateContext() {
    return {
      greeting: 'Hello'
    };
  }
}

/**
 * Set custom DOM API for all views
 * @param mixin - DOM API mixin object
 */
static setDomApi(mixin: DomApiMixin): void;

/**
 * Set custom template renderer for all views
 * @param renderer - Template rendering function
 */
static setRenderer(renderer: RendererFunction): void;

/** DOM API instance used by the view */
Dom: DomApi;

/** Default region class to use for new regions */
regionClass: typeof Region;

/** Indicates view supports render lifecycle events */
supportsRenderLifecycle: true;

/** Indicates view supports destroy lifecycle events */
supportsDestroyLifecycle: true;

// Render lifecycle
view.on('before:render', () => { /* ... */ });
view.on('render', () => { /* ... */ });

// Attach/detach lifecycle  
view.on('before:attach', () => { /* ... */ });
view.on('attach', () => { /* ... */ });
view.on('before:detach', () => { /* ... */ });
view.on('detach', () => { /* ... */ });

// Destroy lifecycle
view.on('before:destroy', () => { /* ... */ });
view.on('destroy', () => { /* ... */ });

// Region lifecycle events
view.on('before:add:region', (view, name, region) => { /* ... */ });
view.on('add:region', (view, name, region) => { /* ... */ });
view.on('before:remove:region', (view, name, region) => { /* ... */ });
view.on('remove:region', (view, name, region) => { /* ... */ });

interface BehaviorHash {
  [name: string]: BehaviorDefinition;
}

interface BehaviorDefinition {
  behaviorClass: typeof Behavior;
  [option: string]: any;
}

interface TriggersHash {
  [eventName: string]: string | TriggerDefinition;
}

interface TriggerDefinition {
  event: string;
  preventDefault?: boolean;
  stopPropagation?: boolean;
}

type TemplateFunction = (data?: object) => string;

type RendererFunction = (template: TemplateFunction | string, data: object) => string;

interface DomApiMixin {
  createBuffer?(): DocumentFragment;
  getDocumentEl?(el: Element): Document;
  getEl?(selector: string | Element): Element[];
  findEl?(el: Element, selector: string): Element[];
  hasEl?(el: Element, childEl: Element): boolean;
  detachEl?(el: Element): void;
  replaceEl?(newEl: Element, oldEl: Element): void;
  swapEl?(el1: Element, el2: Element): void;
  setContents?(el: Element, html: string): void;
  appendContents?(el: Element, contents: Element | DocumentFragment, options?: object): void;
  hasContents?(el: Element): boolean;
  detachContents?(el: Element): void;
}