Skip to content

Latest commit

 

History

History
135 lines (123 loc) · 3.34 KB

README.md

File metadata and controls

135 lines (123 loc) · 3.34 KB

barea.js

barea.js (Basic Reactivity) is a small reactive java script heavy influenced by vue.js and angular.js (before they became huge frameworks). No dependencies just raw reactivity.

What about it

  • Using proxies to react on data changes, like vue3
  • Super light, around than 40Kb unminified
  • Fast
  • No dependencies to other libs
  • Computed properties with automatic dependency tracking

Install

npm install barea.js

Setup

<div id="app"> 
<!-- Your app markup --> 
</div>

<script src="../barea.js"></script>
<script>
const bareaapp = getBareaApp();

const appcontent = {
    data: {
      model: { name:"Johnny Barea" }
    },
    methods:
    {
      someHandler: function(event, arg1, arg2, arg3, arg4, arg5, arg6)
      {
        //Do something
      }
    },
    computed:
    {
      someComputedProperty: function()
      {
        //get some data, or calculate something nice
      }
    },
    mounted: function(data) 
    {
          data.model = getSomeData();
    }
};

bareaapp.mount("app",appcontent);
</script>
  • Directive: ba-bind
<input type="text" ba-bind="root.model.user.firstname">
Bind ui controls to a single value in the model
  • Directive: ba-bind-handler
<input type="text" ba-bind="root.model.somedata" ba-bind-handler="someDataHandler()">
Override binding logic for complex ui controls, by implementing a function that updates data/ui when the bound value changes.
  • Directive: ba-click
<button ba-click="saveMyData('arg1', 'arg2')" ba-path="root.model">
Run functions that do some fun
  • Directive: ba-foreach
<tr ba-foreach="show in root.model.shows">
  <td><input type="text" ba-bind="show.Note"></td>
</tr>
A template directive to create new html based on an array in your model, works only on arrays in your model
or computed properties that returns an array
  • Directive: ba-class
<div ba-class="root.settings.myDivClasses" ></div>
Set class names in your data and have them reflected in the dom.
  • Directive: ba-class-if
<div ba-class-if="root.somevalue==='hey ho'?class1,class2,class3" ></div>
<div ba-class-if="someComputedProperty?class1,class2,class3" ></div>
Set class names in your data based on computed properties or expressions and have them reflected in the dom.
  • Directive: ba-hide
<p ba-hide="root.model.somevalue" ></p>
Show / Hide an element based on an expression

<div ba-hide="someComputedProperty" ></div>
Show / Hide an element based on a computed property
  • Directive: ba-show
<p ba-show="root.model.somevalue" ></p>
Show / Hide an element based on an expression

<div ba-show="someComputedProperty" ></div>
Show / Hide an element based on a computed property
  • Directive: ba-if
<p ba-if="root.showText" ></p>
Add / Remove elements based on an expression

<div ba-if="showText" ></div>
Add / Remove elements based on a computed property
  • Directive: ba-src
Show images based on urls in your model
  • Directive: ba-path
Use this together with handlers (ba-if, ba-show etc..) to have data at a certain path sent as an event parameter
  • Directive: ba-href
Use this to set the href attribute from your data
  • Interpolation
Examples:
{{root.model}}, {{root.model.array}}, {{root.model.somevalue}}
  • Check out the file examples/index.html
Tip: run examples/index.html with vs code live server to explore all directives and functions