Attribute directives defines directives, that are used as attributes of HTML elements, e.g <html ajsf="app">.
since 0.0.1
Defines custom ajsf application name and its context (usual position is in html element).
<html ajsf="app">
</html>since 0.0.1
Binds element with specific value in context. In input or textarea it behaves as its value. In static elements as span or div it affects its html content.
<input type="text" ajsf-bind="value" /><br />
<span ajsf-bind="value"></span>since 0.0.1
Binds standard onblur event, is applicable on standard form elements as input, textarea etc. For using arguments see Method Arguments.
context.onBluc = function() {
console.log('Hello there');
};<input type="text" ajsf-bind="value" ajsf-blur="onBlur" />since 0.0.1
Binds standard onchange event, is applicable on standard form elements as input, textarea etc. For using arguments see Method Arguments.
context.onChange = function() {
console.log('Hello there');
};<input type="text" ajsf-bind="value" ajsf-change="onChange" />since 0.0.1
Sets element's class according the rules defined as value of JSON object.
<div ajsf-class="{'style-bold': 'isBold', 'style-italic': 'isItalic', 'style-stroke': 'list.length | eg 0'}">
Custom content
</div>since 0.0.1
Binds standard onclick event, is applicable on each html element. For using arguments see Method Arguments.
context.onClick = function() {
console.log('Hello there');
};<span ajsf-click="onClick">Click here</span>since 0.0.1
Hides element, if its value equals to true.
<div ajsf-hide="list.length | gt 0">No data to be displayed</div>since 0.0.1
Binds standard onkeydown event, is applicable on standard form elements as input, textarea etc. For using arguments see Method Arguments.
context.onKeyDown = function() {
console.log('Hello there');
};<input type="text" ajsf-bind="value" ajsf-keydown="onKeyDown" />since 0.0.1
Binds standard onkeyup event, is applicable on standard form elements as input, textarea etc. For using arguments see Method Arguments.
context.onKeyUp = function() {
console.log('Hello there');
};<input type="text" ajsf-bind="value" ajsf-keyup="onKeyUp" />since 0.0.1
Defines model object, that is passed into element directive. See 05. Custom Element Directives for more information.
<custom-element ajsf-model="customModel"></custom-element>since 0.0.1
Binds standard onmousedown event, is applicable on standard form elements as input, textarea etc. For using arguments see Method Arguments.
context.onMouseDown = function() {
console.log('Hello there');
};<input type="text" ajsf-bind="value" ajsf-mousedown="onMouseDown" />since 0.0.1
Binds standard onmouseup event, is applicable on standard form elements as input, textarea etc. For using arguments see Method Arguments.
context.onMouseUp = function() {
console.log('Hello there');
};<input type="text" ajsf-bind="value" ajsf-mouseup="onMouseUp" />since 0.0.1
Repeat element binded with this attribute. Passes each object in array as item.
context.list = [
"First item",
"Second item",
"Third item"
];<div ajsf-repeat="list">
<span ajsf-bind="item"></span>
</div>since 0.0.1
Show element, if its value equals to true.
<div ajsf-show="list.length | eq 0">No data to be displayed</div>since 0.0.1
Sets element's style according to defined value by JSON object.
<div ajsf-class="{'background-color': 'myColor', 'color': '!checkbox | then \'green\' | else \'yellow\''}">
Custom content
</div>since 0.0.1
Binds standard onsubmit event, is applicable on standard forms. For using arguments see Method Arguments.
context.onSubmit = function() {
console.log('Hello there');
};<input type="text" ajsf-bind="value" ajsf-submit="onSubmit" />since 0.0.1
Sets text to element with specific value in context. In input or textarea it does NOT behave as its value.
<input type="text" ajsf-text="value" /><br />
<span ajsf-text="value"></span>Note: Passing arguments into method is currently only experimental.
In some cases arguments could be passed to event based methods, however always the first argument is event and the last arguments is element reference.
context.value = "hello";
context.onClick = function(event, arg1, arg2, arg3, element) {
event.preventDefault();
event.stopPropagation();
console.log(arg1);
console.log(arg2);
console.log(arg3);
};
context.compute = function(a, b) {
return a + "-" + b;
};<a href="#" ajsf-click="onClick('abc', value, compute('x', 'y'))">Solve</a>This prints into console:
abc
hello
x-y
Notice, that compute method does not have passed event nor element references.
Previous chapter: 01. Getting started
Next chapter: 03. Built-in Filters