https://github.com/bluzky/nano-template

A lightweight and pure javascript template engine
https://github.com/bluzky/nano-template

lightweight pure-javascript template-engine

Last synced: 11 months ago
JSON representation

A lightweight and pure javascript template engine

• Host: GitHub
• URL: https://github.com/bluzky/nano-template
• Owner: bluzky
• License: mit
• Created: 2016-07-17T16:45:53.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-03-14T15:00:20.000Z (almost 9 years ago)
• Last Synced: 2025-01-13T01:29:33.627Z (about 1 year ago)
• Topics: lightweight, pure-javascript, template-engine
• Language: HTML
• Size: 7.81 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# nano-template

A lightweight and pure javascript template engine

# Usage

### 1. Basic usage

**Javascript**

```js

var templateString = "Hello {{name}}";

var template = nano.compile(templateString);

console.log(template.render({name: "Nano"}))

```

**Output**

```html

Hello Nano!

```

### 2. Render template with context

**Template**

```html

  <ul>

    {% ctx.$.each(data, function(item)do %}

      <li>{{item}}</li>

    {% end) %}

  <ul>

```

**Javascript**

```js

var context = {$: jQuery};

var data = ['this', 'is', 'an', 'array'];

var templateStr = document.getElementById("list-template").innerHTML;

var template = nano.compile(templateStr);

console.log(template.render({data: data}, context));

```

# Syntax

### 1. expression:

  **Template**

  `{{ "hello" + " world" }}`

  **Output**

  `hello world`

### 2. for loop block

  **Template**

  ```html

  {% var items = ['apple', 'pen', 'pineapple'] %}

  


    {% for(var i = 0; i < items.length; i++)do %}

    
{{ items[i] }}

    {% end %}

  

  ```


  **Output**

  ```html

  


    
apple

    
pen

    
pineapple

  

  ```


### 3. if .. else block

  **Template**

  ```html

  {% if(10 % 2 == 0) do %}

  ODD

  {% else %}

  EVEN

  {% end %}

  ```

  **Output**

  ```html

  EVEN

  ```