munawwar / lithium-ui Goto Github PK

custom events exposed by components as different names (x-event)

The aim is to not to have observables as functions. Instead one should be able to treat them like primitives.

The idea is that each component class would initialize observables.
To do that a class would need a special observable property:

component.name = Lui.extend('component.name', Lui.component, {
   observables: ['total', 'list'],
   total: 100,
   list: ['apple', 'orange']
});

During class instantiation, Lui.Component would use Object.defineProperty() to add the observable for each property in 'observables' using setters and getters.

Move away form KO templating syntax and make it more like React/Angular

So the following KO template:

<div class="box" data-bind="if: condition, attr: {title: title}, css: {rounded: isRounded}, style: {color: color}">
    <!-- ko if: condition -->
       <span data-bind="text: text"></span>
    <!-- /ko -->
</div>

would become:

<div class="box" title={title} li-if="condition" li-class="rounded: isRounded" li-style="color: color">
    {if: condition}
       <span>{text}</span>
    {/}
</div>

{/} closes the if statement.