![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
ampersand-dom-bindings
Advanced tools
Readme
Part of the Ampersand.js toolkit for building clientside applications.
Takes binding declarations as described below and returns key-tree-store of functions that can be used to apply those bindings to a DOM tree.
ampersand-view use this for declarative bindings.
The returned functions should be called with these arguments: The root element, the current value of the property, and a name for the binding types where that is relevant.
npm install ampersand-dom-bindings
sets/maintains textContent
of selected element. treats undefined
, null
, and NaN
as ''
'model.key': {
type: 'text',
selector: '.someSelector' // or role
}
sets and maintains single class as string that matches value of property
undefined
, null
, and NaN
as ''
(empty string).'model.key': {
type: 'class',
selector: // or role
}
sets the whole attribute to match value of property. treats undefined
, null
, and NaN
as ''
(empty string). name
can also be an array to set multiple attributes to the same value.
'model.key': {
type: 'attribute',
selector: '#something', // or role
name: 'width'
}
sets the value of the element to match value of the property. works well for input
, select
, and textarea
elements. treats undefined
, null
, and NaN
as ''
(empty string).
'model.key': {
type: 'value',
selector: '#something', // or role
}
add/removes class based on boolean interpretation of property name. name
, yes
, or no
can also be an array of class names where all the values will be toggled.
'model.active': {
type: 'booleanClass',
selector: '#something', // or role
// to specify name of class to toggle (if different than key name)
// you could either specify a name
name: 'active'
// or a yes/no case
yes: 'active',
no: 'not-active'
}
toggles whole attribute on the element (think checked
) based on boolean interpretation of property name. name
can also be an array of attribute names where all the values will be toggled.
'model.isAwesome': {
type: 'booleanAttribute',
selector: '#something', // or role
name: 'checked'
}
toggles existance of entire element (uses a comment node as placeholder if gone) based on boolean interpretation of property name.
// simple show/hide of single element
'model.key': {
type: 'toggle',
selector: '#something' // or role
}
// show/hide where true/false show different things
'model.key': {
type: 'toggle',
yes: '#true_case',
no: '#false_case'
}
Toggles existance of multiple items based on value of property.
'model.activetab': {
type: 'switch',
cases: {
'edit': '#edit_tab',
'new': '#new_tab',
'details': '#details_tab'
}
}
renders innerHTML, can be a string or DOM, based on property value of model
'model.key': {
type: 'innerHTML',
selector: '#something' // or role
}
If given an array, then treat each contained item as separate binding
'model.key': [
{
type: 'booleanClass',
selector: '#something', // or role
name: 'active' // (optional) name of class to toggle if different than key name
},
{
type: 'attribute',
selector: '#something', // or role
name: 'width'
}
]
The attribute
, booleanAttribute
and booleanClass
types also accept an array for the name
property (and yes
/no
for booleanClass
). All the values in the array will be set the same as if each were bound separately.
'model.key': {
// Also works with booleanAttribute and booleanClass
type: 'attribute',
selector: '#avatar',
// Both height and width will be bound to model.key
name: ['height', 'width']
}
role
attributeWe've started using this convention a lot, rather than using classes and IDs in JS to select elements within a view, we use the role
attribute. This lets designers edit templates without fear of breaking something by changing a class. It works wonderfully, but the only thing that sucks about that is the syntax of attribute selectors: [role=some-role]
is a bit annoying to type a million types, and also in JS-land when coding and we see [
we always assume arrays.
I'm proposing that for each of these bindings you can either use selector
or role
, so these two would be equivalent:
'model.key': {
selector: '[role=my-element]'
}
'model.key': {
role: 'my-element'
}
'model.key': '#something' // creates `text` binding for that selector and property
// `type` defaults to `text` so we can also do
'model.key': {
role: 'role-name'
}
var View = require('ampersand-view');
var templates = require('../templates');
module.exports = View.extend({
template: templates.includes.app,
bindings: {
'model.client_name': {
role: 'name'
},
'model.logo_uri': {
type: 'attribute',
name: 'src',
role: 'icon'
}
}
});
Previously after having given views the ability to have their own properties (since view inherits from state) it was awkward to bind those to the DOM. Also, for binding things that were not just this.model
the syntax had to change.
Now this is fairly simple/obvious:
module.exports = View.extend({
template: templates.includes.app,
props: {
activetab: 'string',
person: 'state',
meeting: 'state'
},
bindings: {
// for the property that's directly on the view
'activetab': {
type: 'switch',
case: {
'edit': '#edit_tab',
'new': '#new_tab',
'details': '#details_tab'
}
},
// this one is for one model
'person.full_name': '[role=name]',
// this one is for another model
'meeting.subject': '[role=subject]'
}
});
MIT
FAQs
Takes binding declarations and returns key-tree-store of functions that can be used to apply those bindings.
The npm package ampersand-dom-bindings receives a total of 13,043 weekly downloads. As such, ampersand-dom-bindings popularity was classified as popular.
We found that ampersand-dom-bindings demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers 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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.