A tiny javascript templating framework in ~400 bytes gzipped

Overview

t.js

A tiny javascript templating framework in ~400 bytes gzipped

t.js is a simple solution to interpolating values in an html string for insertion into the DOM via innerHTML.

Features

  • Simple interpolation: {{=value}}
  • Scrubbed interpolation: {{%unsafe_value}}
  • Name-spaced variables: {{=User.address.city}}
  • If/else blocks: {{value}} <<markup>> {{:value}} <<alternate markup>> {{/value}}
  • If not blocks: {{!value}} <<markup>> {{/!value}}
  • Object/Array iteration: {{@object_value}} {{=_key}}:{{=_val}} {{/@object_value}}
  • Multi-line templates (no removal of newlines required to render)
  • Render the same template multiple times with different data
  • Works in all modern browsers

How to use

var template = new t("<div>Hello {{=name}}</div>");
document.body.innerHtml = template.render({name: "World!"});

For more advanced usage check the t_test.html.

This software is released under the MIT license.


Coffeescript version maintained by @davidrekow

PHP version maintained by @ramon82

Comments
  • Uncaught TypeError: Cannot use 'in' operator to search for 'url' in undefined

    Uncaught TypeError: Cannot use 'in' operator to search for 'url' in undefined

    td is can't use.

    {{@spiders}} {{/@spiders}}
    爬虫URL爬取状态页面状态
    {{=_val.url}}

    function read_convent_task_report(task_id) { var _dom=$('.convent-report').html();

    $.ajax({
        type: 'POST',
        url: CONVENT_REPORT_SOURCE,
        dataType: 'json',
        data: {'conventid':task_id},
        error: function(){
            console.log('read convent report error!');
        },
        success: function(msg){
            var template = new t(_dom);
            _readModal('查看报告',template.render(msg['data']),1);
        }
    });
    

    }

    opened by smarttang 28
  • Added Coffeescript version

    Added Coffeescript version

    Hey, fantastic & clean little library. I'm not sure if you want a CS version to ship, but I needed to throw one together and I figured I'd offer. Thanks for the fun code :)

    opened by rekow 4
  • Fixes rendering of

    Fixes rendering of "0" values

    {{=age}} with { age: 0 } will render "0" {{=name}} with { name: false } will render "false" {{=name}} with { name: null } or {} will render ""

    opened by holic 2
  • IE9 breakage: Object doesn't support this action

    IE9 breakage: Object doesn't support this action

    This is breaking in IE9, works fine in latest Chrome. var template = new t('<option value="{{=name}}">{{=name}}</option>') ;

    I am getting this error: SCRIPT445: Object doesn't support this action

    opened by luk3thomas 1
  • Add Function Support

    Add Function Support

    Sometimes we need format data before render.

    We have:

    {"CreatedAt": 1346295626942}
    

    We need:

    Thu Aug 30 2012 11:00:26 GMT+0800
    

    We can:

    var template = new t("<div>{{#CreatedAt|dateFormat}}</div>");
    template.register("dateFormat",function(data){return new Date(parseInt(data));});
    template.render({"CreatedAt": 1346295626942});
    
    opened by icyflash 1
  • Documentation of not blocks

    Documentation of not blocks

    The README.md says:

    • If not blocks: {{!value}} <<markup>> {{/value}}

    ...but it should say:

    • If not blocks: {{!value}} <<markup>> {{/!value}}
    opened by lafncow 1
  • adding support for AMD, CommonJs or global browser space

    adding support for AMD, CommonJs or global browser space

    this leaves the global t variable when using the normal way but allows to use as a proper reqire.js module i.e.

    define(["t"], function (t) {
        return (new t("{{=data}}")).render({data: 'myData'});
    }
    
    opened by tarnowsc 0
  • [enhancement] Add missing bower.json.

    [enhancement] Add missing bower.json.

    Hey, maintainer(s) of jasonmoo/t.js!

    We at VersionEye are working hard to keep up the quality of the bower's registry.

    We just finished our initial analysis of the quality of the Bower.io registry:

    7530 - registered packages, 224 of them doesnt exists anymore;

    We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

    Sadly, your library jasonmoo/t.js is one of them.

    Can you spare 15 minutes to help us to make Bower better?

    Just add a new file bower.json and change attributes.

    {
      "name": "jasonmoo/t.js",
      "version": "1.0.0",
      "main": "path/to/main.css",
      "description": "please add it",
      "license": "Eclipse",
      "ignore": [
        ".jshintrc",
        "**/*.txt"
      ],
      "dependencies": {
        "<dependency_name>": "<semantic_version>",
        "<dependency_name>": "<Local_folder>",
        "<dependency_name>": "<package>"
      },
      "devDependencies": {
        "<test-framework-name>": "<version>"
      }
    }
    
    

    Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

    NB! Please validate your bower.json with jsonlint before commiting your updates.

    Thank you!

    Timo, twitter: @versioneye email: [email protected] VersionEye - no more legacy software!

    opened by timgluz 1
  • Using the exclamation point {{!var}} resulted in

    Using the exclamation point {{!var}} resulted in "undefined"

    Using the {{!var}} something {{/!var}} notation didn't work when the var was set to TRUE

    This is because in the code it only checks the meta "!" when the val is false. If the val is true, the meta is still set to "!" making it truthy and then the script doesn't know what to do with it, so returns nothing.

    So, I added this (the "else if" at the bottom)

    if (!val) {

                    // handle if not
                    if (meta == '!') {
                        return render(inner, vars);
                    }
                    // check for else
                    if (has_else) {
                        return render(if_false, vars);
                    }
    
                    return "";
                }
                else if (meta == '!')
                    return "";
    

    If there's a better way, or if I'm doing something wrong, please let me know.

    There may be other instances where it returns nothing. Maybe ensuring all code paths return would be a good way to lock things down.

    Great engine otherwise! Use it every day. Thanks for creating it.

    opened by grzo64 1
  • What does

    What does "modern browsers" mean exactly?

    Some unfortunate folks (like me) still need to support IE6 (whereas I can get away with requiring more recent versions of FF/Chrome/Safari).

    So could you be a little more specific in the README about which browsers are supported?

    Cheers!

    opened by netnichols 2
Owner
Jason Mooberry
coding things
Jason Mooberry
Asynchronous Javascript templating for the browser and server

Dust.js Asynchronous Javascript templating for the browser and server. This fork is maintained by LinkedIn. Install NPM Important: We recommend that y

LinkedIn 2.9k Dec 31, 2022
1KB lightweight, fast & powerful JavaScript templating engine with zero dependencies. Compatible with server-side environments like node.js, module loaders like RequireJS and all web browsers.

JavaScript Templates Contents Demo Description Usage Client-side Server-side Requirements API tmpl() function Templates cache Output encoding Local he

Sebastian Tschan 1.7k Jan 3, 2023
handlebars.js 8.8 4.4 L3 JavaScript An extension to the Mustache templating language.

Handlebars.js Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. Handlebars is largely compa

The Handlebars Templating Language 16.9k Jan 5, 2023
Asynchronous Javascript templating for the browser and server

Dust.js Asynchronous Javascript templating for the browser and server. This fork is maintained by LinkedIn. Install NPM Important: We recommend that y

LinkedIn 2.9k Dec 31, 2022
handlebars.js - An extension to the Mustache templating language.

Handlebars.js Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. Handlebars is largely compa

The Handlebars Templating Language 16.9k Jan 5, 2023
A compiler for the Mustache templating language

Hogan.js - A mustache compiler. Hogan.js is a compiler for the Mustache templating language. For information on Mustache, see the manpage and the spec

Twitter 5.1k Jan 2, 2023
A powerful templating engine with inheritance, asynchronous control, and more (jinja2 inspired)

Nunjucks Nunjucks is a full featured templating engine for javascript. It is heavily inspired by jinja2. View the docs here. Installation npm install

Mozilla 8k Dec 30, 2022
HTML Framework that allows you not to write JavaScript code.

EHTML (or Extended HTML) can be described as a set of custom elements that you can put on HTML page for different purposes and use cases. The main ide

Guseyn Ismayylov 172 Dec 22, 2022
Highly opinionated project template for Serverless Framework that follows and applies hexagonal architecture principle to serverless world. Prepared with easy testing in mind.

serverless-hexagonal-template Highly opinionated project template for Serverless Framework that applies hexagonal architecture principles to the serve

Paweł Zubkiewicz 126 Dec 26, 2022
The fastest + concise javascript template engine for nodejs and browsers. Partials, custom delimiters and more.

doT Created in search of the fastest and concise JavaScript templating function with emphasis on performance under V8 and nodejs. It shows great perfo

Laura Doktorova 4.9k Dec 31, 2022
Embedded JavaScript templates -- http://ejs.co

Embedded JavaScript templates Installation $ npm install ejs Features Control flow with <% %> Escaped output with <%= %> (escape function configurable

Matthew Eernisse 6.8k Dec 30, 2022
Take a swig of the best template engine for JavaScript.

NOT MAINTAINED Fork and use at your own risk. Swig Swig is an awesome, Django/Jinja-like template engine for node.js. Features Available for node.js a

Paul Armstrong 3.1k Jan 4, 2023
A helper to send whatsapp without scheduling a contact, the project developed using TDD with Jest, Javascript classes, BotstrapVue and SweetAlert.

Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints and fixes

Magascript 7 Sep 13, 2022
Variation-template - Variation is a PSD template that is covered into a web template using HTML5, CSS3, Bootstrapv4.6, JavaScript.

Variation Template Design Variation is a PSD website template. In this project this template is designed with HTML. Deployment This site is deployed a

Bipronath Saha 1 Jan 1, 2022
👌A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for drop an annoying pop-ups confirming the submission of form in your web apps.

Throw out pop-ups confirming the submission of form! A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for dro

Vic Shóstak 35 Aug 24, 2022
A tiny (108 bytes), secure, URL-friendly, unique string ID generator for JavaScript

Nano ID English | Русский | 简体中文 | Bahasa Indonesia A tiny, secure, URL-friendly, unique string ID generator for JavaScript. “An amazing level of sens

Andrey Sitnik 19.6k Jan 8, 2023
A super tiny Javascript library to make DOM elements draggable and movable. ~500 bytes and no dependencies.

dragmove.js A super tiny Javascript library to make DOM elements draggable and movable. Has touch screen support. Zero dependencies and 500 bytes Gzip

Kailash Nadh 814 Dec 29, 2022
A tiny clock and date, period, or duration math library < 2k (minified/gzipped)

timewave v0.1.4 A tiny time simulation and date/time math library < 3k (minified/gzipped) const clock = Clock(new Date(2022,1,1),{tz:'America/New_York

Simon Y. Blackwell 46 Dec 18, 2022
World's smallest responsive 🔥 css framework (395 bytes)

lit ?? a ridiculously small responsive css framework. I challenged myself to see how small I could go, but preserve everything Skeleton, Milligram, an

Arham Jain 1.9k Jan 7, 2023
Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped

pickout Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped. DEMO PAGE For syntax of the previous version click here How to

Alan Ktquez 89 Sep 20, 2022