Tests - Barbe.js

Examples for Barbe.js

Here are a few examples how to use Barbe in different cases.

Static template

Html

<script type="text/html" id="template_static" data-anchor="anchor_static">
    This is a static template
</script>

Javascript

new Barbe.View("template_static").grow();

Result

Basic template that included a another template

Html

<script type="text/html" id="template_partial" data-anchor="anchor_partial">
    Include another template: {{>template_static}}
</script>

Javascript

new Barbe.View("template_partial").grow();

Result

Basic template

Html

<script type="text/html" id="template_basic" data-anchor="anchor_basic">
    This is a basic template created with <em>{{ name }}</em>.
</script>

Javascript

new Barbe.View("template_basic", {data: {name: "Barbe.js"}}).grow();

Result

Define the anchor in Javascript

Html

<script type="text/html" id="template_anchor">
This is a template created with <em>{{ name }}</em> and the anchor is defined with the constructor.
</script>

Javascript

new Barbe.View("template_anchor", {data: {name: "Barbe.js"}}, "anchor_anchor").grow();

Result

Alter the response

Html

<script type="text/html" id="template_success" data-anchor="anchor_success">
This is a template created with {{ name }} and the data has been altered: {{ nameUpperCase }}.
</script>

Javascript

new Barbe.View("template_success", {
    data: {name: "Barbe.js"},
    success: function (response) {
        response.nameUpperCase = response.name.toUpperCase();
    }
}).grow();

Result

Populate a template with an API response

Html

<script type="text/html" id="template_api" data-anchor="anchor_api>
{{#data}}
    {{name}}
{{/data}}
</script>

Javascript

new Barbe.View("template_api", {
    url: "https://api.github.com/users/boertel",
    dataType: "jsonp"
}).grow();

Result

Populate a template with an API response

Html

<script type="text/html" id="template_api_advanced" data-anchor="anchor_api_advanced>
{{#data}}
    Login: {{login}}<br>
    Location: {{location}}<br>
    Created at: {{created_at}}<br>
{{/data}}
</script>

Javascript

new Barbe.View("template_api_advanced", {
    url: "https://api.github.com/users/boertel",
    dataType: "jsonp",
    success: function (response) {
        response.data.created_at = new Date(response.data.created_at);
    }
}).grow();

Result

Before Barbe runs.