jasonmoo / t.js

A tiny javascript templating framework in ~400 bytes gzipped

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

t.js's Issues

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

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!

Documentation of not blocks

The README.md says:

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

...but it should say:

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

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);
    }
});

}

[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!

Suggestion to fix mishandling of nested loops.

Sometimes you have nested loops suitable for a tree-view kind of display. For example:

{
  qtys: {
    '2016': { 
      '03': [111, 112, 113], 
      '12': [121, 122, 123]
    },
    '2018': {
     '05': [211, 212, 213], 
     '09': [221, 222, 223] 
    },
  },
}

And you want to display it like this:

<ul>{{@qtys}}
  <li>{{=_key}}
    <ul>{{@_val}}
      <li>{{=_key}}
        <ul>{{@_val}}
          <li>{{=_val}}</li>
        {{/@_val}}</ul>
      </li>
    {{/@_val}}</ul>
  </li>
{{/@qtys}}</ul>

The problem is that the blockregex will match the first {{@_val}} with the very first {{/@_val}} it finds, not the second one, which is the correct one.

I've found a relatively easy solution to this by a minor tweek to the regular expression. Here you have both the original and my suggested one:

var blockregex = /\{\{(([@!]?)   (.+?)         )\}\}(([\s\S]+?)(\{\{:\1\}\}([\s\S]+?))?)\{\{\/\1\}\}/g,
var blockregex = /\{\{(([@!]?)([\.\w]+)[\s\S]*?)\}\}(([\s\S]+?)(\{\{:\1\}\}([\s\S]+?))?)\{\{\/\1\}\}/g;

I left a couple of gaps in the original one to highlight the change, just a few characters.

What it does is to allow an optional label in the placeholder to clearly specify the matching tags, like this:

<ul>{{@qtys}}
  <li>{{=_key}}
    <ul>{{@_val year}}
      <li>{{=_key}}
        <ul>{{@_val month}}
          <li>{{=_val}}</li>
        {{/@_val month}}</ul>
      </li>
    {{/@_val year}}</ul>
  </li>
{{/@qtys}}</ul>

The labels (year, month) are optional and can be omitted (like in {{@qtys}} which is not ambiguous).

The label can be separated from the tag by anything other but a valid variable name, that is, it doesn't need to be a space, you could write {{@_val-month}} and it would do just fine. As a matter of fact, the space (or any separator) is part of the label. The exact label, including the separator spaces or whatever was used must be replicated verbatim on the closing tag, thus, a single space before and none after the label is preferred for clarity and consistency. I omitted checking for spaces so to add as fewest bytes to the already small size of the library.

Well chosen labels can help document what _val actually stands for.

This issue is actually a suggestion and requires no reply. Feel free to close. (and thanks for this little, really little, gem)

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.

document.body.innerHtml should be document.body.innerHTML

in your readme

[enhancement] PHP version

Hey, amazing library! I really like tiny and useful scripts.

So I made a PHP version for t.js: https://github.com/ramon82/t.php

Thanks for the code!

what about the latest javascript exploit?!

ok(/</script><script>alert(5)</script>/.test(div.innerHTML), "err?");