router.plugins.init

Works with router.plugins.component to declaratively initialize a viewModel before rendering.

Usage

• Register the plugin after router.plugins.component (alternatively, use your own plugin/middleware to attach the viewModel instance to ctx.component.viewModel)
• Attach a promise to your viewModel (or any property of your viewModel) using the exported INITIALIZED Symbol
• Profit :moneybag:

import {
  Route,
  componentRoutePlugin,
  componentInitializerRoutePlugin,
  INITIALIZED,
} from '@profiscience/knockout-contrib'

Route.usePlugin(componentRoutePlugin).usePlugin(componentInitializerRoutePlugin) // **MUST** come after component plugin

class DataModel {
  public [INITIALIZED] = this.init()

  public async init() {
    /* do some async init stuff */
  }
}

class ViewModel {
  /**
   * Attach directly to the viewModel...
   */
  public [INITIALIZED] = this.init()

  /**
   * ...or any enumerable property
   */
  public data = new DataModel()

  async init() {
    /* do some async init stuff */
  }
}

What’s with the symbol?

Prevents naming conflicts. The alternative is to use a “magic” property, like initialized, but that would a) prevent you from using your own initialized property/method in your viewModel (which is something you’ll probably want at one point or another) b) make it difficult for developers unaware of the use of this plugin to track down issues or figure out where the magic is happening (explicit imports lead to discoverability)