Git Product home page Git Product logo

jsmart's Introduction

jSmart

jSmart is a port of the Smarty Template Engine to Javascript, a JavaScript template library that supports the template syntax and all the features (functioens, variable modifiers, etc.) of the well-known PHP template engine Smarty.

jSmart is written entirely in JavaScript, does not have any DOM/DHTML/browser or third-party JavaScript library dependencies and can be run in a web browser as well as a standalone JavaScript interpreter or CommonJS environments like node.js.

jSmart supports plugin architecture, you can extend it with custom plugins: functions, blocks and variable modifiers, templates inclusion, templates inheritance and overriding, caching, escape HTML.

jSmart has some limited support of the PHP Smarty syntax and allows you to use the same Smarty templates on both server and client side, for both PHP and Javascript.

How to use jSmart in Node.js

  1. Install jSmart from NPM Registry

     $ npm install jsmart
    
  2. Create template, use PHP Smarty syntax. Say demo.tpl

     Hello {$name}
    
  3. Now lets read the template and compile it. jSmart object compiles the template.

     var fs = require('fs');
     require('jsmart');
     var tpl = fs.readFileSync('./demo.tpl', {encoding: 'utf-8'});
     var compiledTpl = new jSmart(tpl);
    
  4. Assign data to the template passing Javascript object to the fetch function. Variable compiledTpl has the compiled template. You can call fetch function as many times with different data.

     var fs = require(fs);
     require('jsmart');
     var tpl = fs.readFileSync('./demo.tpl', {encoding: 'utf-8'});
     var compiledTpl = new jSmart(tpl);
     var output = compiledTpl.fetch({name: 'World'});
     console.log(output);
    
  5. Execute the file.

     $ node demo.js
    
  6. Result would be.

     Hello World
    

How to use jSmart in browser

  1. Include jSmart library Javascript file in your header.

     <html>
         <head>
             <script language="javascript" src="jsmart.js"></script>
         </head>
    
  2. Create template, use PHP Smarty syntax. Put the template's text in <script> with the type="text/x-jsmart-tmpl" so a browser will not try to parse it and mess it up.

     <script id="test_tpl" type="text/x-jsmart-tmpl">
    
         <h1>{$greeting}</h1>
    
         {foreach $books as $i => $book}
             <div style="background-color: {cycle values="cyan,yellow"};">
                 [{$i+1}] {$book.title|upper} by {$book.author}
                     {if $book.price}
                         Price: <span style="color:red">${$book.price}</span>
                     {/if}
             </div>
         {foreachelse}
             No books
         {/foreach}
    
         Total: {$book@total}
    
     </script>
    
  3. Create JavaScript data object with variables to assign to the template

     <script>
         var data = {
             greeting: 'Hi, there are some JScript books you may find interesting:',
             books : [
                 {
                     title  : 'JavaScript: The Definitive Guide',
                     author : 'David Flanagan',
                     price  : '31.18'
                 },
                 {
                     title  : 'Murach JavaScript and DOM Scripting',
                     author : 'Ray Harris',
                 },
                 {
                     title  : 'Head First JavaScript',
                     author : 'Michael Morrison',
                     price  : '29.54'
                 }
             ]
         };
     </script>
    
  4. Create new object of jSmart class, passing the template's text as it's constructor's argument than call fetch(data), where data is an JavaScript object with variables to assign to the template

     <script>
    
         var tplText = document.getElementById('test_tpl').innerHTML;
    
         var tpl = new jSmart( tplText );
    
         var res = tpl.fetch( data );
    
         /*
          or fetch straigth from JavaScript string
         var res = document.getElementById('test_tpl').innerHTML.fetch(data);
         */
    
         document.write( res );
    
     </script>
    
  5. The result would be

     <h1>Hi, there are some JScript books you may find interesting:</h1>
    
     <div style="background-color: cyan;">
         [1] JAVASCRIPT: THE DEFINITIVE GUIDE by David Flanagan
         <span style="color:red">$31.18</span>
     </div>
    
     <div style="background-color: yellow;">
         [2] MURACH JAVASCRIPT AND DOM SCRIPTING by Ray Harris
     </div>
    
     <div style="background-color: cyan;">
         [3] HEAD FIRST JAVASCRIPT by Michael Morrison
         <span style="color:red">$29.54</span>
     </div>
    
     Total: 3
    
  6. The template's text is compiled in the jSmart constructor, so it's fast to call fetch() with different assigned variables many times.

     var tpl = new jSmart( '{$greeting}, {$name}!' );
    
     tpl.fetch( {greeting:'Hello', name:'John'} ); //returns: Hello, John!
    
     tpl.fetch( {greeting:'Hi', name:'Jane'} );    //returns: Hi, Jane!
    

DOCUMENTATION

https://github.com/umakantp/jsmart/wiki

TESTS

  • Install Node.js and PHP in a folder. e.g. Install them in directories /home/user/jsmart/node and /home/user/jsmart/php respectively.

  • Clone jSmart repo in the same folder. e.g. Clone at /home/user/jsmart. So jsmart repo is in /home/user/jsmart/jsmart folder.

  • Go to jSmart and run make test. e.g. Go to /home/user/jsmart/jsmart and run make test.

  • You can modify makefile and test/js/test-common.js for changing path of node and php respectively as per your needs but never commit those changes in master repository.

NOTICE

This project was originally hosted at Google code and was started by miroshnikov. Since author was not active on project. I have forked and planned on pushing further improvements and features.

jsmart's People

Contributors

miroshnikov avatar codeurweb avatar

Watchers

James Cloos avatar Luxlu avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.