marionette.renderers

Collection of custom renderers for Marionette.js

Usage

Import the desired renderer

// with ES modules
import renderer from 'marionette.renderers/[renderer-name]'
 
// or with CommonJS modules
var renderer = require('marionette.renderers/[renderer-name]')

Configure the Marionette View class

//all views
Marionette.View.setRenderer(renderer)
 
//or specific view class
var MyView = Marionette.View.extend()
MyView.setRenderer(renderer)

Set template property when defining a view. The format of each template vary with the renderer type

import template from './my-template'
var MyView = Marionette.View.extend({
  template: template
})

Options

Is possible to configure the rendering with options defined in the View class:

outerRender Boolean

By default all renderers set the inner contents of the View el. Some renderers allows to define the outerHTML, i.e., define the attributes of View el in the template.

thisAsState Boolean

By default the data returned by serializeData is passed to the template. By setting thisAsState to true the view instance will be passed to the template.

Renderers

rivets

Uses rivets as template engine. By its nature (data binding) the view instance is always passed to the template

• Supports outerRender: no

virtual-dom

Uses virtual-dom to render the HTML

• Supports outerRender: yes

snabbdom

Uses snabbdom to render the HTML

• Supports outerRender: yes

idom

Uses incremental-dom to render the HTML

• Supports outerRender: technically yes, but the template transpiler should not set key for root element. See this issue.

inferno

Uses inferno to render the HTML

• Supports outerRender: no

Examples

See examples folder of this repository for working applications.

idom live example

snabbdom live example