Skip to content

Latest commit

 

History

History
114 lines (89 loc) · 2.76 KB

guide.md

File metadata and controls

114 lines (89 loc) · 2.76 KB

Introduction

What is slim.js?

Slim.js is a lightweight web component library that provides extended capabilities for components, such as data binding, using es6 native class inheritance. This library is focused for providing the developer the ability to write robust and native web components without the hassle of dependencies and an overhead of a framework.

Getting started

npm install slim-js --save
bower install slimjs

Please note: Target browsers that do not support web component are required to use a polyfill like web-components

Defining a slim component

Slim.tag('my-custom-tagname', class extends Slim {

});

Every slim.js component has it's own default template to be rendered upon placed on the DOM tree. This template is accessible via a template getter function.

Slim.tag('my-custom-tagname', class extends Slim {
    get template() {
        return '<div>Hello, slim.js!</div>';
    }
});

Usage of the element in another template or in a HTML wrapper:

<body>
    <my-custom-tagname></my-custom-tagname>
</body>

Data Binding

Slim.js supports one-way data binding to inner text, attributes, directly or via a parsing methods.

Examples

Text-property binding

Text binding is used with the bind attribute

Slim.tag('my-greeter', class extends Slim {
    get template() {
        return '<span bind>Hello, [[person]]';
    }
    
    onBeforeUpdate() {
        this.person = 'slim.js';
    }
});

Slim.js creates a runtime getter/setter function for the property greetee, and with every change the component will automatically render itself with the new result.

Attribute-property Binding

Attribute binding is done in a same manner, only the bind attribute is not required.

Slim.tag('my-custom-tag', class extends Slim {
    get template() {
        return '<my-greeter name="[[person]]"></my-greeter>'
    }
    
    onBeforeUpdate() {
        this.person = 'John doe';
    }
});

Attribute-method-property binding

You could wrap a binding with a parsing method, thus enforcing parser method to run every change in the property

Slim.tag('my-custom-tag', class extends Slim {
    get template() {
        return '<my-greeter name="[[toUpper(person)]]"></my-greeter>'
    }
    
    onBeforeUpdate() {
        this.person = 'John doe';
    }
    
    toUpper(value) {
        return value.toUpperCase();
    } 
});

Conditional Rendering with slim-if

Slim.tag('my-custom-tag', class extends Slim {
    get template() {
        return '<div slim-if="myBoolean">Now you see me</div>';
    }
    
    onAfterUpdate() {
        this.myBoolean = false; // now you don't
    }
});