kl.js v1.0.0

Kl.JS

Easy-to-use Javascript micro-framework for binding

See TODO file for contributing

HOW TO INSTALL

npm install

bower install

BASIC USAGE

Let's imagine you have a DOM like this

<a class="testlink" href="">
</a>

You will bind your data :

Kl.Bind(".testlink", {
    "content": "My Link text",
    "href": "http://mywebsite.com"
});

You could also apply style :

Kl.Bind(".testlink", {
    "content": "My Link text",
    "href": "http://mywebsite.com"
    "style": {
        "color": "blue",
        "textDecoration": "none",
        "backgroundImage": "url('https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png')"
    }
});

Now if you have a complex DOM :

<a class="testlink" href="">
    <span class="first-item">
        <ul>
            <li class="withclass"></li>
            <li></li>
        </ul>
    </span>
</a>

You will bind your data and your style like that :

Kl.Bind(".testlink", {
    "href": "http://mywebsite.com",
    "style": {
        "textAlign":"center"
    },
    "ul>li": {
        "content": "Test",
        "style": {
            "fontSize": "2em"
        }
    },
    "li.withclass": {
        "content":"Test2"
    }
});

COMPLEX USAGE

Loop Binding

// DATA SOURCE
var data = [{
  url: 'http://www.google.com'
},{
  url: 'http://www.yahoo.com'
}];

// LOOP BINDING

Kl.Bind(".testlink", data, function(item){
//MAP FUNCTION
    return {
      "href": item.url
    };
);

The result will be :

<a class="testlink" href="http://www.google.com"></a>
<a class="testlink" href="http://www.yahoo.com"></a>

Animations

<a class="testlink" href="http://www.google.com" style="opacity:0;transition: opacity 0.3s;"></a>

Kl.Bind(".testlink", data, function(item){
//MAP FUNCTION
    return {
      "href": item.url,
      "style": {
        "opacity": 1
      }
    }
);

Ajax requests

// Simple get request
Kl.Ajax('GET', '/api/sampleGet', {}, function (data) {
    //callback
});
// Simple get request with params
Kl.Ajax('GET', '/api/sampleGet', {'params': 'test'}, function (data) {
  //callback
});
// Simple post request with params
Kl.Ajax('POST', '/api/sampleGet', {'params': 'test'}, function (data) {
  //callback
});
// Post requests with custom headers
Kl.Ajax('POST', '/api/sampleGet', {'params': 'test'}, function (data) {
  //callback
}, [
{"name": "Authorization", "Basic " + btoa("admin:admin"}
]);

LICENSE

This code is under MIT License