A simple state management library using jQuery.
Include jQuery and the library in your HTML file:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./jquery-state-store.min.js"></script><script src="https://unpkg.com/jquery-state-store@1.4.0/dist/jquery-state-store.min.js"></script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/jquery-state-store@1.4.0/dist/jquery-state-store.min.js"></script>
<title>Jquery State Management</title>
</head>
<body>
<p data-bind="text:counter">0</p>
<button id="increment">Increment</button>
<button id="decrement">Decrement</button>
<script>
$.useState('counter', 0);
$(document).ready(function() {
$('#increment').click(function() {
var currentCounter = $.getState('counter');
$.setState('counter', currentCounter + 1);
});
$('#decrement').click(function() {
var currentCounter = $.getState('counter');
$.setState('counter', currentCounter - 1);
});
})
</script>
</body>
</html>Sets the text content of the element to the state value.
<p data-bind="text:counter"></p>Sets the HTML content of the element to the state value.
<div data-bind="html:user.name"></div>Conditionally displays the element based on the state value.
<div data-bind="if:counter > 0">
Counter is greater than zero.
</div>Sets the specified data attribute of the element to the state value.
<div data-bind="data:title:user.name"></div>Binds the state value to the input element's value, making it two-way reactive.
<input type="text" data-bind="model:user.name" />Here is an example of how to use the directives in your HTML and JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>State Management Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/jquery-state-store@1.4.0/dist/jquery-state-store.min.js"></script>
</head>
<body>
<div>
<button id="increment">Increment</button>
<button id="decrement">Decrement</button>
</div>
<p data-bind="text:counter"></p>
<div data-bind="if:counter > 0">
Counter is greater than zero.
</div>
<input type="text" data-bind="model:user.name" />
<p data-bind="text:user.name"></p>
<script>
$(document).ready(function() {
// Initialize states
$.useState('counter', 0);
$.useState('user', { name: 'John Doe', age: 30 });
// Example of setting state
$('#increment').click(function() {
var currentCounter = $.getState('counter');
$.setState('counter', currentCounter + 1);
});
$('#decrement').click(function() {
var currentCounter = $.getState('counter');
$.setState('counter', currentCounter - 1);
});
// Apply bindings
$.applyBindings();
});
</script>
</body>
</html>$.useState(name, initialValue)
//Register a new state.
$.getState(name)
//Get the value of the state.
$.setState(name, newValue)
//Set a new value for the state.
$.reactive(name, listener)
//Register a listener that gets called whenever the state changes.
$.useEffect(name, effect)
//Register an effect that gets called with the state value whenever the state changes.