router.middleware.flashMessage

NOTE: This package is intended for consumption via the @profiscience/knockout-contrib metapackage

Display a flash message which will be removed after the next navigation.

Usage

Register the Middleware

import { flashMessageMiddleware } from '@profiscience/knockout-contrib'

Router.use(flashMessageMiddleware)

Displaying the Flash Message

Create a custom flash message component the exported flashMessage observable, or include the flash-message component (<contrib-flash-message></contrib-flash-message>).

Default Flash Message Component

See components.flash-message

Custom Flash Message Component

import * as ko from 'knockout'
import { Router, flashMessage } from '@profiscience/knockout-contrib'

/**
 * flashMessage is an observable contatining the value passed below
 *
 * The following is an example of how you could add custom properties for your flash message
 */

// If using TypeScript, define the interface for your flash message
declare module '@profiscience/knockout-contrib-router-middleware-flash-message' {
  // tslint:disable-next-line no-shadowed-variable
  interface IFlashMessage {
    text: string
    type?: string
  }
}

ko.components.register('flash-message', {
  viewModel: {
    instance: {
      text: ko.pureComputed(() => {
        const unwrappedFlashMessage = flashMessage()
        if (typeof unwrappedFlashMessage === 'string') {
          return unwrappedFlashMessage
        } else {
          return unwrappedFlashMessage.text
        }
      }),
      css: ko.pureComputed(() => {
        const unwrappedFlashMessage = flashMessage()
        if (typeof unwrappedFlashMessage.type !== 'undefined') {
          return unwrappedFlashMessage.type
        } else {
          return 'info'
        }
      }),
    },
  },
  template: `<div class="flash-message" data-bind="text: text, css: css"><div>`,
})

Setting a Flash Message

Set message by extending the context prior to navigating via Router.update, ctx.update, or ctx.redirect via the with option and the exported symbol.

import { Router } from '@profiscience/knockout-contrib-router'
import { FLASH_MESSAGE } from '@profiscience/knockout-contrib-router-middleware'

/**
 * The following are supported by the default flash message component.
 * As shown above, you can configure this however you'd like if you're
 * using a custom component
 */
Router.update('/', {
  with: {
    // set only the text and use default values for other options
    [FLASH_MESSAGE]: 'You are not logged in!'

    [FLASH_MESSAGE]: {
      text: 'Saved successfully!',  // flash message text
      type: 'success',              // bootstrap alert type, default: info
      dismiss: true,                // allow dismissing the flash message, default: false
      timeout: 5000                 // automatically dismiss the flash message after timeout in ms, default: false
    }
  }
})