Skip to content
This repository has been archived by the owner on Mar 1, 2019. It is now read-only.

Files

Latest commit

 

History

History
56 lines (44 loc) · 2.74 KB

templates.md

File metadata and controls

56 lines (44 loc) · 2.74 KB

Templates

The markup for Tungsten.js views are described by mustache templates which are shared for both server-side and client-side rendering.

Server Side Rendering

By default, Tungsten.js expects that on page load the HTML for the initial state will be rendered from the server using the same data and template that was used to bootstrap the application. This means that Tungsten.js will not re-render on the application on page load. This default behavior, however, can be overridden by setting the dynamicInitialize property when initializing the app view:

module.exports = new AppView({
  el: '#app',
  template: template,
  model: new AppModel(window.data),
  // Set the following line for client-side only rendering
  dynamicInitialize: true
});

dynamicInitialize should only be set when the application won't be rendered from the server and will instead be client-side rendered only.

Tungsten.js is agnostic to the server technology used to render the template. The only restriction is that the output of the server-side rendered template mustache match the output of the bootstrapped data and client-side template. There are implementations of mustache rendering engines available in a variety of server-side technologies, including Node.js, Java, C++, PHP, and Go.

Pre-compiled Templates

Each template and partial should be pre-compiled with the provided wrapper for the Ractive-based pre-compiler. A webpack loader, tungsten_template, is provided for this purpose. With this template pre-compiling, there are a few edge cases which depart from standard mustache rules:

  • All HTML attributes must have a value, including disabled, selected, novalidate, etc.
    • Breaks: <select {{#some_bool}}disabled{{/some_bool}} ...
    • Works: <select class="foo" {{#some_bool}}disabled="disabled"{{/some_bool}} ...
  • Opening and closing HTML tags must be within the same conditional block.
  • <a> elements cannot be nested.

The precompiler API can be used to create a webpack loader. tungsten.precompiler is provided to pre-compile JS template functions, and can be used in a webpack configuration like so:

loaders/tungsten_template.js

module.exports = require('tungstenjs').precompiler;

webpack.config.js

module.exports = {
  // [...]
  resolveLoader: {
    modules: [
      path.join(__dirname, 'node_modules'),
      path.join(__dirname, 'loaders')
    ]
  },
  module: {
    loaders: [
      { test: /\.mustache$/, loader: 'tungsten_template' }
    ]
  }
}