Barbe.js

– because a "barbe" (french for beard) contains a mustache.

Barbe is a Javascript Library that allows you to attach templates to specific elements on your page. It also populates templates from API responses and show automatically a loader during the loading. This library is for "read-only" projects and don't need to interact a lot with users through forms.

Download

Usage

Here is a short example of how to use Barbe in a simple way. Mustache is the templating engine used.

1. Create your template

<script id="my_template" data-anchor="my_anchor" type="text/html">
    <p>This is a template building with <em>{{ name }}</em>.</p>
</script>

2. Create your anchor in your html file

...
<div id="my_anchor"></div>
...

3. Initialize the template

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

4. Result

...
<div id="my_anchor">
    <p>This is a template building with <em>Barbe.js</em>.</p>
</div>
...

Check out this page, to have more examples.

Playing with the View

Constructor signature:

Barbe.View(
    {string} template id,
    {object} provider,
    [{object} options| {string} anchor id]
)

Populate a template with an API response

Most of the populated templates use an API response, that's why Barbe provides a easy way to populate the templates. And in bonus, a loader is automatically inserted inside the anchor during the API call.

var view = new Barbe.View("api_template", {
    url: "/api/v1/user",
    success: function (response) {
        /* ... */
        [return object;]
    }
});

Note: the second parameter, called provider, is almost the same object that will be passed to the jQuery $.ajax function. The success is overwritten to take the response and use it as data by the templating engine to create the HTML version of the template. You can directly modify the response object or return object; at the end of the function if you want to return something else to the template.

Execute a function on the response

Mustache does not provide a helper system, but sometimes we need to surcharge the data such as capitalized strings, change the format of numbers.

var view = new Barbe.View("api_template", {
    data: [{name: "John"}, {name: "Ben"}],
    success: function (response) {
        for (var i = 0; i < response.length; i++) {
            response[i].nameUpperCase = response[i].name.toUpperCase();
        }
    }
});

Specify the anchor when creating the View

In the previous examples, the anchor was defined in the script tag, but for some reasons you may want to define it dynamically in Javascript.

// with a string
var view = new Barbe.View("template-id", {}, "anchor-id");
// or a dictionary
var view = new Barbe.View("template-id", {}, {
    anchor: "anchor-id"
});

More Options

When you initialize Barbe with the function init, you can set bunch of parameters.

var settings = {};
Barbe.init(settings);

Use your favorite/own ajax function

By default, Barbe.js uses the jQuery function $.ajax to do ajax calls. If for some reasons, you need to use your own function, you can update Barbe settings:

Barbe.init({
    ajax: $.ajax
});

But careful, the second parameter of the Barbe.View constructor is the parameter that will be use by the ajax function. You may need to create a proxy function that take jQuery-like object and call your own function.

var myAjaxFunction = function (path, data, callback, method) {
    /* do some magic here */
};

var myProxyFunction = function (args) {
    myAjaxFunction(args.url, args.data, args.success, args.method);
};

Barbe.init({
    ajax: myProxyFunction
});

Use another templating engine

By default, Barbe is using Mustache but you can use your favorite templating engine such as Hogan or Handlerbars. These two templating engine provide a way to compile your template before rendering them, in that case, you need to define the template settings as following:

var hoganTemplate = {
    // Function that compiles the template
    compile: function (str) {
        return Hogan.compile(str);
    },
    // Function that render the template with data.
    render: function (self, context, partials) {
        return self.render(context, partials);
    },
    // Type to identify templates.
    type: ["text/html"];
};

Barbe.init({
    template: hoganTemplate
});

Integrated loader

During ajax calls (that can take a while for slow APIs), it's better to notify users that something is happening, they just need to hang out here and wait. Barbe takes care of putting a loader (basically this piece of code: <div class="barbe-loader"></div>) in the anchor and replace it by the template at the end of the call.

If the loader provided by default doesn't suit you, you can create your own class. It has to define only one function: remove, that is executed before attaching the template to the anchor.

// Define your own class
var myLoader = function (anchor) {
    this.div = document.createElement("div");
    this.div.className = "my-loader";
    this.div.innerHTML = "Loading...";
    this.anchor = anchor;
    this.anchor.appendChild(this.div);
};
myLoader.prototype.remove = function () {
    this.anchor.appendChild(this.div);
};

Barbe.init({
    Loader: myLoader
});

Or in the case, you don't want to show this loader, you just need to say it.

// Disable the loader
Barbe.init({
    Loader: false
});

You may also want to disable the loader or use a other class for a specific View instead of all of them. For that, use the third parameter of the constructor.

new Barbe.View("template-id", {}, {
    Loader: false
});

How templates are loaded

By default, the templates are loaded when you create the Barbe.View. You can specify the option: autoLoad to true and the templates are loaded when Barbe.init is called.

Code

Source code is available on GitHub: boertel/barbe.js. Feel free to fork it, submit pull requests, report bugs, etc.

Download