SlimJS Provides fun and easy-to-use data-binding and injection mechanism for native web-components without the hassle of heavyweight frameworks.
Write your code without any forced code-conventions or patterns from a 3rd party library.
One-way properties and method bindings using brackets. Every change in "user" property on the parent, will propogate to the bound nodes
<login-screen>
<login-form user="[user]"
user-details="[getDetails(user)]" />
</login-screen>
Inject property values into your text with a simple annotation. Have no fear from performance issues: you choose where and when your bindings happen!
<my-element user="{UserModel}"}>
<span bind>
Hello, [[user.name]]! Welcome to [[location]]
</span>
</my-element>
Dependency injection using curly braces
const instance = new TodoModel()
SlimInjector.define('LoginModel', function() {
"use strict";
return instance
})
...
<login-details model="{LoginModel}" />