fe3dback/moredraw

Handlebars two-side wrapper (js/php) - Same template anywhere with reactive update

dev-master 2017-04-11 14:51 UTC

README

Build Status Coverage Status

MoreDraw

Smart handlebars template with two-side render (php/js) with just one template and reactive data update. Based on zordius/lightncandy && handlebars parser

Require (install)

Install PHP Side

install deps:

$ cd /your-project/
$ composer require fe3dback/moredraw

in project init (config, etc..) (before we use template render)

require_once 'vendor/autoload.php';

$moreDraw = new NeoHandlebars\MoreDraw();
$moreDraw->init([
  'templates_dir' => __DIR__ . '/templates', // where templates will be
  'cache_dir' => __DIR__ . '/tmp/cache' // where cache will be
]);

Install JS Side (optional, only for js use)

Install handlebars parser (handlebars.min-latest.js) from this page: http://builds.handlebarsjs.com.s3.amazonaws.com/bucket-listing.html?sort=lastmod&sortdir=desc

Or from official site: http://handlebarsjs.com/installation.html

in site footer (place when you include js files), add js lib

<!-- include official handlebars parser lib -->
<script src="/vendor/handlebars.min-latest.js"></script>

<!-- include moreDraw -->
<div style="display: none;">
  <!-- moredraw raw templates and partials -->
  <?=$moreDraw->getAllJSTemplates()?>
</div>

<script src="/moredraw/handlebars.js"></script>

Use

Use. Server Side

Create file examples/test.hbs in your templates folder. With some content like this: hello {{name}}!

// _index is optional, only if we need provided data in js later
echo $moreDraw->render('examples/test', ['_index' => 'to_world', 'name' => 'world']); // Hello world!
echo $moreDraw->render('examples/test', ['_index' => 'to_universe', 'name' => 'universe']); // Hello universe!
Use. Client Side
let data = MoreDraw.getData('examples/test', 'to_world'); // {'name' => 'world'}
data.name = data.name + " & me";
let html = MoreDraw.render('examples/test', data); // Hello world & me!