Language with Elements

You want to see the example first if this was your first time.

<!-- Put the language text on the HTML content -->
<p sf-lang="my.test">Fallback text here</p>

<!-- Put the language text on the placeholder
     You MUST put placeholder attribute -->
<input type="text" sf-lang="for.placeholder" placeholder></input>

When using this library for every element, you should manually initialize it for your document.body or specific dynamic element.

sf.language.init(document.body);

Combine with mustache template or other element

<script>
sf.model('...', function(self){
    self.text = "from";
});

sf.language.add('...', {
    my:{
        test: "Henlo {text} here",
        test_bold: "Henlo {text}, I'm [b:bold] and [u:underlined {text}]",
    }
});
</script>

<sf-m>
    // Combine with mustache only
    <p sf-lang="my.test">Hello {{ text }} here</p>

    // Also combine with element
    <p sf-lang="my.test_bold">Hello {{ text }}, I'm <b>bold</b> and <u>underlined {{ text }}</u></p>
</sf-m>

Language can be:

• Combined with model => {mustache}
• Wrapped inside an element => [element-tag:your text here]