
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Model/view/events object factory for modular user interface
Install as NPM module.
npm install afinity --save
And include via CommonJS/Browserify.
app = require 'afinity'
The minified library found in dist
folder can be included after jQuery.
<script src="afinity.min.js"></script>
Then it is exposed as afinity
in the global scope.
app = afinity
The library and examples are written in CoffeeScript for sweeter syntax, but it works well in vanilla JS also. Just throw in a healthy dose of parentheses, curly brackets, semicolons..
The main method is create
, which takes three properties: model, view, and events.
obj = app.create
model:
counter: 0
view:
'#counter-view'
events:
'click .add': ->
@set 'counter', @get()+1
'click .subtract': ->
@set 'counter', @get()-1
obj.on 'change:counter', ->
console.log 'Counter changed to '+obj.get('counter')
Each object:
obj = app.create
model :
message : 'Hello'
obj.set 'message', 'Hey'
Methods
Events
The HTML attribute data-bind
is used to bind model property to view, and vice versa if it's an input element. All other templating logic like looping through collections, conditional states, must be handled by object methods, or in the context.
Small templates may be given as a string.
obj = app.create
model:
counter: 0
view:
'<span data-bind="counter"></div>'
increment: (value) ->
@set 'counter', @get('counter')+(value or 1)
decrement: (value) ->
@set 'counter', @get('counter')-(value or 1)
obj.increment(5).decrement(10)
There are two template helpers html
and css
to encapsulate both template and style within the object. This can be useful for building reusable components.
{ form, input, button } = app.html
css = app.css
obj = app.create
model:
name: ''
email: ''
view:
format:
form ->
input bind: 'name'
input bind: 'email'
button type: 'submit'
style: css
'&':
border: '1px solid #ddd'
'input, button':
width: '100%'
events:
'submit': ->
data = @get()
# Do something with data
The template can be already in the document.
<form id="contact-form">
<input type="text" name="name">
<input type="email" name="email">
<button type="submit">Send</button>
</form>
obj = app.create view: '#contact-form'
If it's a form, the inputs are automatically bound as model properties.
<script type="text/template" id="single-post">
<article class="single-post">
<h1 data-bind="title"></h1>
<small data-bind="date"></small>
<main class="post-content" data-bind="html=content"></main>
</article>
</script>
Post = app.create view: '#single-post'
newPost = app.clone Post,
title: 'New blog post'
date: '2016-04-20'
content: 'Lorem ipsum, lorem ipsum'
app.body.append '.post-list', newPost
Originally based on Agility.js by Artur B. Adib - http://agilityjs.com
Forked, pulled requests, modularized, extended, refactored and caffeinated
FAQs
Model/view/events object factory for modular user interface
We found that afinity 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.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.