https://github.com/sbmelvin/filo

Simple id based html templates
https://github.com/sbmelvin/filo

filo html html-template javascript mustache string

Last synced: 8 days ago
JSON representation

Simple id based html templates

• Host: GitHub
• URL: https://github.com/sbmelvin/filo
• Owner: sbmelvin
• Created: 2014-03-04T04:08:39.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2017-04-08T18:01:38.000Z (over 7 years ago)
• Last Synced: 2023-03-24T05:13:40.360Z (over 1 year ago)
• Topics: filo, html, html-template, javascript, mustache, string
• Language: JavaScript
• Size: 69.3 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
## Filo

#### ID-based HTML Templates

Filo does one thing. It replaces tags in the form of `{{tag_name}}` within the provided template with the html element whose html ID matches `tag_name` or with a value from an 'override' object.

Here is an example template for a blog post (stored as post.htm):

```html



{{post-header}}

{{post-body}}

{{post-footer}}





{{post_title}}





{{post_content}}





{{post_date}}



```


To render this post, load post.htm into a JS string (we'll call it template). Next Filo needs to know which html node is the root node. We specify the root node by its html ID. Lastly, we need to provide values for the template tags that don't correspond to html IDs, such as {{post_title}}. These values are stored in an opional 'overrides' object. To render the post, we write:

```Javascript  

var myPost = F.render('post', template, {

	post_title: 'My Post Title',

	post_content: 'Blah Blah Blog',

	post_date: '03-22-2013'

});

```

**Result:**

```html



  


    My Post Title

  

  


    Blah Blah Blog

  

  


    03-22-2013

  



```


*If Filo encounters a template tag that cannot be resolved to an html ID or override key, the render will fail.*

## FAQ

**Q**) Why?

**A**) Filo was made to keep long HTML strings out of JS.

**Q**) This looks like Mustache.js, how is this not Mustache.js?

**A**) Filo is not a replacement for Mustache.js, but uses the same tag syntax so developers can easily migrate to Mustache.js if they need a more-powerful templating system. Filo allows developers to build html by writing reusable html nodes that are linked together by html ids and template tags.