Jade template engine support

Karpich Dmitry edited this page Jul 5, 2015 · 9 revisions

.jade support

At now clinch have Jade template engine module clinch.jade

Important about templates itself - by default all templates MUST be used with self-prefixed variables. If you like to use with-magic - change jade compiler settings.

Clinch = require 'clinch'
clinch_jade = require 'clinch.jade'

packer = new Clinch
packer.addPlugin clinch_jade self : off

Template example

p Hello #{self.name}!!!

Start with simple example

module.exports = class JadePowered
  renderData : (data) ->
    template_fn = require './template' # '.jade' extension may be omitted 
    res = template_fn data

Thats all. Just require() jade template and clinch will build client-mode template and put it in bundle.

In browser it must to be included Jade's ./runtime.js, and all Jade features will work - includes, filters and all others.

See on-line example of working bundled jade template. Source of greater.js.

But it exists one little things to warn about - our first example cant work in node.

Node.js can't handle require() '.jade' files.

If it necessary to make dual-headed code, worked in node and in browser, it should be extra works done

fs = require 'fs'
jade = require 'jade'

module.exports = class JadePowered
  This method render results with jade template and given data
  Its dual-headed version, works in node and in browser
  renderData : (data) ->

    # clinch will emulate module, but NOT emulate module.id
    template_fn = if module.id

      # if we are here - its node env and we are should build template
      template_name = "#{__dirname}/template.jade"
      template = fs.readFileSync template_name, 'utf8'

      # its very close to clinch default settings for jade
      options = 
        pretty : on
        self : on
        filename : template_name

      jade.compile template, options

    # unless module.id  - its clinched (browser version) code
      # just require it and it will be done
      require './template'

    res = template_fn data

For worked example and result see './test/test_template_engine.coffee', './test/fixtures/jade_powered'.