A simple, lightweight web framework. Yes another framework. I'm tired of how bloated the popular ones are. Angular, React and Vue.
Welcome to DOMBindy. A new web framework written in typescript. Syntax is heavily inspired by AngularJS however this framework is designed to be as minimal as possible. Just one single JS file and you're ready to start using the templating tools right away.
This plugin is currently still in development and highly experimental. The project itself is intended for educational use only. You're welcome to check it out, or add to it as you please, but you are probably better off using one of the big names (Angular, React, VueJS +) for your production environments!
A list of directives and examples are provided below to get you started.
Simple string binding a variable to your HTML tag. Any changes made to the variable are mirrored on the DOM.
<body bind-app="appData">
<h1>
Hello there,
<span bind-str="name"></span>
</h1>
</body>
<script src="dist/bundle.js"></script>
<script type="text/javascript">
const appData = {
name: 'Leila-codes'
}
</script>
Similar to the classic ng-repeat this one iterates over a bound array and repeats the targeted element for each item.
<body bind-app="appData">
<div class="card" bind-for="apps">
<div class="card-header">
<h6 bind-str="name"></h6>
</div>
<div class="card-body"></div>
</div>
</body>
<script src="dist/bundle.js"></script>
<script type="text/javascript">
const appData = {
name: 'Leila-codes',
apps: [
{name: "Test App #1"},
{name: "Test App #2"},
{name: "Test App #3"}
]
}
</script>
Similar to ng-click adds an onclick handler that is triggered inside your application's controller/scope.
Note: Named variables within the scope are automatically bound to the function arguments.
<body bind-app="appData">
<div>
<button bind-click="clicked(name)"></button>
</div>
</body>
<script src="dist/bundle.js"></script>
<script type="text/javascript">
const appData = {
name: 'Leila-codes',
clicked: (e, userName) => {
alert(`Hello there ${userName}`)
}
}
</script>
Similar to ng-model this one is a bidirectional binding for input elements. Any text inputted is automatically set back to the variable.
<body bind-app="appData">
<div>
<input type="text" bind-model="username">
<h6>
Your username is:
<span bind-str="username"></span>
</h6>
</div>
</body>
<script src="dist/bundle.js"></script>
<script type="text/javascript">
const appData = {
username: ''
}
</script>
Similar to ng-class allows for toggling of a list of classes based on whether the expression is true or false.
<body bind-app="appData">
<div class="card">
<div class="card-header" bind-class="{'bg-primary': isBlue, 'bg-warning': !isBlue}">
Hello App v1
</div>
<div class="card-body">
Hello World!
</div>
</div>
</body>
<script src="dist/bundle.js"></script>
<script type="text/javascript">
const appData = {
isBlue: true
}
// Toggle the blue background every 3 seconds.
setInterval(() => {
window.app.scope.isBlue = !window.app.scope.isBlue;
}, 3000)
</script>
Similar to ng-if of ng-show toggles the display property on the element between none and it's previous value depending on whether the expression evaluates to true or false.
<body bind-app="appData">
<div class="card" bind-if="shouldShow">
<div class="card-body">
I am now visible
</div>
</div>
</body>
<script src="dist/bundle.js"></script>
<script type="text/javascript">
const appData = {
shouldShow: true
}
// Toggle the panel visibility every 5 seconds.
setInterval(() => {
window.app.scope.shouldShow = !window.app.scope.shouldShow;
}, 5000)
</script>
Similar to ng-style should evaluate the expression's value and assign it to the property configured as the style.
<body bind-app="appData">
<div class="card" bind-style="{'background-color': bgColour}">
<div class="card-body">
I am now visible
</div>
</div>
</body>
<script src="dist/bundle.js"></script>
<script type="text/javascript">
const appData = {
bgColour: '#0cf'
}
</script>
FAQs
A simple, lightweight web framework. Yes another framework. I'm tired of how bloated the popular ones are. Angular, React and Vue.
We found that dombindy demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious Ruby gems typosquat Fastlane plugins to steal Telegram bot tokens, messages, and files, exploiting demand after Vietnam’s Telegram ban.
Research
Security News
Socket uncovered four malicious npm packages that exfiltrate up to 85% of a victim’s Ethereum or BSC wallet using obfuscated JavaScript.
Security News
TC39 advances 9 JavaScript proposals, including Array.fromAsync, Error.isError, and Explicit Resource Management, which are now headed into the ECMAScript spec.