diff --git a/README.md b/README.md index 21e55e8..85255fb 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ -#Aromatic +# +Aromatic ## **What is it?** This is templates with elements [mustache](http://mustache.github.io/) and similar to [handlebars](http://handlebarsjs.com/) @@ -12,17 +13,22 @@ To use it is quite simple and trivial. ``` // index.js import Aromatic from './src/Aromatic'; + let node = document.querySelector('#test'); let some = { foo : 'light', foo2 : 'some' , + deep : { -name : 'Yee' -} } Aromatic.compile(node.innerHTML, some); +name : 'Yee +} +Aromatic.compile(node.innerHTML, some); + // first parameter is your original string // second parameter is the object with data // to get generated html, just call getHtml node.innerHTML = Aromatic.getHtml(); // What to find in html? + // index.html
{{ foo }}
@@ -39,25 +45,44 @@ Expressions in parentheses correspond to data in the object ``` -let data = { one : 'one string', two : 'two string' } // index.html
{{ one }}
{{ two }}
// after compile
one string
two string
+let data = { +one : 'one string', +two : 'two string' +} +// index.html +
+
{{ one }}
+
{{ two }}
+
+// after compile +
+
one string
+
two string
+
``` _It's simple, you write Aromatic inserts_ -Sometimes you may have html in data +**Sometimes you may have html in data** -example : +**example** : ``` -let data = { one : '

one string

', two : '

two string

' } +let data = { +one : '

one string

', +two : '

two string

' +} ``` if you want to html escape, it is necessary in the line ``` -
{{ !!one!! }}
{{ !!two!! }}
+
+
{{ !!one!! }}
+
{{ !!two!! }}
+
``` **Loops? No, problem** @@ -65,7 +90,19 @@ Let's imagine that we need a loop ``` -// data let loop = [ { firstname : 'Ilya', lastname : 'Chubarov' }, { firstname : 'Maria', lastname : 'Ivanova' }, { firstname : 'Misha', lastname : 'Bootosov', age : 20 }, +// data let loop = [ +{ firstname : 'Ilya', +lastname : 'Chubarov' +}, +{ +firstname : 'Maria', +lastname : 'Ivanova' +}, +{ +firstname : 'Misha', +lastname : 'Bootosov', +age : 20 +}, { firstname : 'Misha', lastname : 'Bootosov', @@ -73,21 +110,26 @@ age : 20 , child : { name : 'To' } -} ]; +} +]; + // index.html
    -{{#each loop}} + +{{#each loop}}
  • firstname : {{ firstname }}

    -

    lastname {{ lastname }}p> +

    lastname {{ lastname }}

    + {{#if age}}

    {{ age }}

    {{#else}}

    it is unknown how many years

    {{/if}} + {{#if child}}

    {{ child.name }}

    {{/if}} @@ -100,8 +142,6 @@ name : 'To' **I want to add your filter values** - - ``` let data = { @@ -115,14 +155,17 @@ two : 'two string'
    {{ two }}
-Aromatic.registerFilter('toLowerCase', function(test) { return test.test.toLowerCase(); }); +Aromatic.registerFilter('toLowerCase', function(test) { +return test.test.toLowerCase(); +}); + // after compile
one string
two string
-``` +```