jQfy

(https://badges.gitter.im/Join Chat.svg)

Compiles in server, Render in browser. online demo, examples

Install

$ npm install -g jqfy

Usage

Complie htmls

$ mkdir templates/
$ vim templates/well.html # write your sub html
$ jqfy -i templates/ -o js/templates.js

Use in browser:

<script src="js/jquery.min.js"></script>
<script src="js/templates.js"></script>
<script>
    $('body').append(templates.well())
</script>

help

$ jqfy -h
  
  Usage: jqfy [options]

  Options:

    -h, --help                   output usage information
    -V, --version                output the version number
    -i, --input [path]           source file or directory (default: .)
    -o, --output [path]          destination file
    -r, --return-type [type]     choice return type (root|contents|html)
    -e, --ext [ext]              extensions (default: html)
    -n, --namespace [namespace]  namespace (default: templates)
    --fix-return-type            fix return type of generated function
    --return-object              return object, output in $ property of object
    --use-shortcut-functions     use shortcut functions in generated function
    --use-getter                 use getter/escape functions in generated function
    -T, --no-trim                do not trim
    -C, --no-comment             ignore comments

Custom tags and attributes

script tag

We write content of script tags to body of function. if src attribute exists, content ignored.

attributes

• src: script path

jqfy:name attribute

With this attribute you can set variable name.

{{val}} in text or attribute name and value

render value of data.val in the output html.

note: in attribute name use {{var}} without space. for example {{ x }} not supported in attributes name

example

input html:

<div id="div-{{ i }}" class="text-{{ type }}" data-{{k}}="{{ v }}">
    {{i}}: {{ text }}
</div>

use:

render({
  i: 5,
  type: 'info',
  k: 'target',
  v: '#form-1',
  text: 'Hi jQfy'
}, {returnType: 'html'})

output:

<div id="div-5" class="text-info" data-target="#form-1">5: Hi jQfy</div>

How it works

First we parse your html with cheerio then foreach tag generate a code. This code create a jquery object and set id, class and attributes of element, then append jquery object to parent's jquery object. if script tags exist in your html, we append content of script to generated code.