MoonRise

Two-way data binding

Create a 2-way data binding by using the "mnr-bind" custom attribute to any html element and bind any of its attributes with a bind variable

Declare some bind variables and assign them to an element:

<script>
Mnr.onLoad({ inputVariable:'' });
</script>

<input mnr-bind="inputVariable" />
<p mnr-bind="inputVariable" ></p> A B C D E F

The most relevant attribute of the binded element will be updated if not explicited set

For example if the element is a paragraph or heading it will update the "text" attribute, if it is an input the "value" will be update and if it is an image it will be the "src" attribute

Different attributes can be bind in a single element by especify it in the "mnr-bind" tag

Only inputs or textareas will update the value of the binding variable when a change occurs to the "value" attribute, every other case wil behave as a single-way data binding.

<input mnr-bind="id, placeholder, value, :bindVariable" />
<p mnr-bind="id:bindVariable" ></p>

The binding update process runs through a debounce function to maintain performance, the default value is 20ms but it can be changed by passing the debounceBindTime option when MoonRise initialize.

DOM Manipulation

Target HTML elements using Mnr.e(query|element)

The DOM Manipulation method always returns an array of elements and you can use sub methods to chain different actions:

<div class="box" ></div>
<script>

Mnr.e('.box') .css({height:'100px'})
.classAdd('colorGreen');

</script>


Waiting:

You can use the "wait" utility method in chain to set a waiting time between functions

<div class="box" onClick="waitTest(this)" ></div>
<script>

const waitTest = function(el){ let parent = Mnr.e(el).parent().size();
let box = Mnr.e(el).size();
let moveX = `${parent.width - box.width}px`;
let moveY = `${parent.height - box.height}px`;
let elem = Mnr.e(el);
Mnr.u.wait(()=>{
elem.css({
translate: `${moveX} 0`,
'background-color': 'var(--mnr-colorError)',
})
},0)
.wait(()=>{
elem.css({translate: `${moveX} ${moveY}`})
},500)
.wait(()=>{
elem.css({translate: `0 ${moveY}`})
},500)
.wait(()=>{
elem.css({translate: `0 0`,'background-color': 'var(--mnr-colorOk)'});
},500)
};

</script>


Click the box: