body`. # Express middleware Take vdt as a express middleware. ```javascript app.use(require('vdt.js').middleware({ src: 'vdt/src/path', amd: true, // and amd wrapper force: false, // force compile autoReturn: true // see api of `Vdt` below })); ``` # Escape & Unescape Any output will be escaped. If you want prevent it, you can do it likes below: ```javascript var a = '

title

{a}

// a will be escaped, ->

<h1>title</h1>

// a will not be escaped ->

title

``` # Event You can bind event in `vdt` template directly by adding `ev-event` property, likes below: ```javascript

{index}: {user.name}

``` # Template Extend Vdt template can be extended. Use `` and `` directive. Use `` to extend the parent template function. `templateFunction` is a function of parent template. Use ` to set block which can be filled by child. Use `parent()` to get parent content. ```jsx ``` ```jsx ``` # Api ## Vdt(source, [options]) Compile `source` then return a vdt object. * @param `source` {String|Function} JSX template source or a template function returned by `Vdt.compile` * @param `options.autoReturn=true` {Object|Boolean} If add `return` keyword at end or not. The last element of template have to be a `html tag element` if is `true`. * @return {Object} a vdt object ## Vdt.compile(source, [options]) Compile JSX template source then return a template function which should pass to `Vdt`. The returned function has a property named source. You can use it to pre-process JSX. * @param `source` {String} JSX template source * @param `options.autoReturn=true` {Object|Boolean} If add `return` keyword at end or not. The last element of template have to be a `html tag element` if is `true`. * @return {Function} a template function should pass to `Vdt`. ### template.source The source code of template function. ## The `vdt` object The object returned by `Vdt`. ### vdt.render(data) Handle data and return a dom. * @param `data` {Object} data passed to template * ~~@param `thisArg` {Object} the binding of this in template.~~ `this` is `data` in template. * @return {Dom} html dom ### vdt.update([data]) Update the dom using the new data. * @param `data` {Object} the whole data passed to template. If it is not provided, `vdt.data` will be used. * @return {Dom} html dom which has updated ### vdt.data The data passed to vdt above. So you can modify it directly. ## Vdt.parse(source) Parse JSX template to an ast object * @param `source` {String} JSX template source * @return {Object} abstract syntax tree object ## Vdt.stringify(ast) Stringify the ast object to hscript string. * @param `ast` {Object} abstract syntax tree object * @return {String} hscript string with a return expression at end ## Vdt.virtualDom The object exported by [virtual-dom](https://github.com/Matt-Esch/virtual-dom) module. # Benchmark See [Benchmark](http://javey.github.io/vdt/benchmark/benchmark.html) ## Render(compile every time) * Vdt.js#render x 5,454 ops/sec ±2.40% (89 runs sampled) * Lodash#render x 2,390 ops/sec ±3.68% (81 runs sampled) * Underscore#render x 6,035 ops/sec ±5.86% (81 runs sampled) * Handlebars#render x 959 ops/sec ±6.16% (77 runs sampled) * Mustache#render x 4,899 ops/sec ±6.09% (84 runs sampled) __Fastest is Underscore#render__ ## Update(cache compiled result) * Vdt.js#update x 14,724 ops/sec ±3.61% (87 runs sampled) * Lodash#update x 7,734 ops/sec ±2.70% (84 runs sampled) * Underscore#update x 7,989 ops/sec ±4.52% (89 runs sampled) * Handlebars#update x 7,200 ops/sec ±2.63% (86 runs sampled) * Mustache#update x 7,747 ops/sec ±2.40% (96 runs sampled) __Fastest is Vdt.js#update__ --- _Source: https://npm.io/package/vdt.js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._